It sets all of the explicit and implicit grid properties in a single declaration.
grid: auto-flow / 1fr 1fr 1fr;
Grid Template
They define the lines and track sizing.
grid-template-rows
grid-template-columns
grid-template-rows
It defines the property of grid rows including sizing and number of rows.
grid-template-rows: 40px 4em 40px;
It will have three rows one of 40px, one of 4em and one of 40px.
grid-template-columns
It defines the property of grid columns including sizing and number of rows.
grid-template-columns: 60px 50em;
It will have two columns one of 60px and one of 50em.
Repeat is used to divide all available spaces.
grid-template-rows: repeat(count,1fr);
grid-template-columns: repeat(count,1fr);
Grid Gaps
They define the gaps between the lines.
row-gap: ; gap between row
column-gap: ; gap between column
grid-gap: row-gap column-gap;
Grid Columns
Defines an item's starting and ending position inside the column.
grid-column-start: line_number.
grid-column-end: line_number.
grid-column: start_col/end_col;
grid-column: start_col/ span number;
Grid Row
Defines an item's starting and ending position inside the row.
grid-row-start: line_number.
grid-row-end: line_number.
grid-row: start_col/end_col;
grid-row: start_col/ span number;
#container {
display: grid;
grid: repeat(2, 60px) / auto-flow 80px;
}
#container > div {
background-color: #8ca0ff;
width: 50px;
height: 50px;
}
