grid in ccss code example

Example 1: css grid

.container{
	display:grid;
  	place-items:center;
}

//My youtube:'https://www.youtube.com/HasibulIslambd'

Example 2: grid in ccss

/*
Most Common Grid properties:

display: grid; 
display: inline-grid; for applying inline property on grid
grid-template-rows: 
grid-template-columns: 
grid-auto-flow: dense;
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
justify content
align items

fr = fill up any available space
auto-fit= stretch the cards to fill up the screen 
auto-fill= create extra virtual cards to fill up the screen
*/
.grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(auto, 1fr));
  grid-template-rows: repeat(2, 200px);
  grid-gap: 10px;
}

Example 3: css grid

grid-template-rows: 50px 100px 100px

Example 4: grid css

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

Tags:

Misc Example