CSS Grid Elements
CSS Grid Elements
A grid container contains one or more grid items.
By default, a grid container has one grid item for each column and row. We can also set a grid item to span multiple columns or rows.
grid-column Property
The grid-column property defines the start and end positions of a grid item's column.
Note: grid-column is a shorthand property for grid-column-start and grid-column-end.
We can refer to line numbers to place grid items, or use the keyword "span" to define the number of columns the item will span.
The following example sets "item1" to start at column 1 and end before column 5:
Example
.item1 {
grid-column: 1 / 5;
}
The following example sets "item1" to span 3 columns:
Example
.item1 {
grid-column: 1 / span 3;
}
The following example sets "item2" to span 3 columns:
Example
.item2 {
grid-column: 2 / span 3;
}
grid-row Property
The grid-row property defines the start and end positions of a grid item's row.
Note: grid-row is a shorthand property for grid-row-start and grid-row-end.
We can refer to line numbers to place grid items, or use the keyword "span" to define the number of rows the item will span.
The following example sets "item1" to start at row 1 and end before row 4:
Example
.item1 {
grid-row: 1 / 4;
}
The following example sets "item1" to span two rows:
Example
.item1 {
grid-row: 1 / span 2;
}
grid-area Property
The grid-area property is a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end.
The following example sets "item8" to start at row 1 and column 2, and end at row 5 and column 6:
Example
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
The following example sets "item8" to start at row 2 and column 1, and span 2 rows and 3 columns:
Example
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
Naming Grid Items
The grid-area property can be used to name grid items.
Named grid items can be referenced by the container's grid-template-areas property.
The following example names "item1" as "myArea" and spans five columns:
Example
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
Each row is defined inside a single quote ' ' with spaces separating the columns.
A . denotes an unnamed grid item.
Example
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
To define two rows, add another set of single quotes ' ' with the columns for the second row.
The following example sets "item1" to span 2 rows and 2 columns:
Example
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
Naming all grid items and creating a webpage template:
Example
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
}
Order of Grid Items
Grid layout allows us to place grid items anywhere we like. The first element in the HTML code does not necessarily have to be displayed as the first item in the grid.
Example
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
You can use media queries to rearrange the order at specified screen sizes:
Example
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 / span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 / span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6 { grid-area: 2 / 3 / 3 / 4; }
}