CSS grid element
CSS grid element
A grid container contains one or more grid elements.
By default, each column and row of the grid container has a grid element, and we can also set grid elements to span multiple columns or rows, rows, and column row numbers.
grid-column attribute
grid-column property defines the start and end positions of the grid element column.
Note: grid-column is grid-column-start and grid-column-end abbreviated property of the property.
We can refer to the line number to set the grid element, or we can use the keyword “span” to define the number of columns that the element will span.
The following example sets “item1” to start in column 1 and end before column 5:
Example
.item1 {
grid-column: 1 / 5;
}
The following example sets “item1” to span three columns:
Example
.item1 {
grid-column: 1 / span 3;
}
The following example sets “item2” to span three columns:
Example
.item2 {
grid-column: 2 / span 3;
}
grid-row attribute
grid-row property defines the start and end positions of grid element rows.
Note: grid-row is grid-row-start and grid-row-end abbreviated property of the property.
We can refer to the line number to set the grid element, or we can use the keyword “span” to define the number of rows that the element will span.
The following example sets “item1” to start on line 1 and end before line 4:
Example
.item1 {
grid-row: 1 / 4;
}
The following example sets “item1” to span two lines:
Example
.item1 {
grid-row: 1 / span 2;
}
grid-area attribute
The grid-area attributes are grid-row-start , grid-column-start , and grid-column-end abbreviations for the grid-column-end attributes.
The following example sets “item8” starting at row 1 and column 2, and ending at row 5 and column 6.
Example
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
The following example sets “item8” starting at row 2 and column 1, spanning 2 rows and 3 columns.
Example
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
Grid element naming
grid-area attribute allows you to name grid elements.
Named grid elements can be passed through the container’s grid-template-areas property to refer to.
The following example item1 named “myArea” and spans five columns:
Example
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
Each line is defined by `'' within single quotation marks, separated by spaces.
The . number represents a grid item with no name.
Example
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
To define two rows, define the column of the second row in another set of single quotation marks.
The following example sets “item1” to span 2 rows and 2 columns:
Example
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
Name all grid elements and make a web page 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 elements
Grid layout allows us to place grid elements anywhere we like.
The first element in the HTML code does not have to appear as the first itemof the element 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 under the specified screen size:
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; }
}