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. Note: 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 The following example sets “item1” to span three columns: Example The following example sets “item2” to span three columns: Example Note: 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 The following example sets “item1” to span two lines: Example The The following example sets “item8” starting at row 1 and column 2, and ending at row 5 and column 6. Example The following example sets “item8” starting at row 2 and column 1, spanning 2 rows and 3 columns. Example Named grid elements can be passed through the container’s The following example Example Each line is defined by The . number represents a grid item with no name. Example 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 Name all grid elements and make a web page template: Example 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 You can use media queries to rearrange the order under the specified screen size: Example
8.26.1. CSS grid element ¶
grid-column attribute ¶ grid-column property defines the start and end positions of the grid element column. grid-column is grid-column-start and grid-column-end abbreviated property of the property..item1 {
grid-column: 1 / 5;
}
.item1 {
grid-column: 1 / span 3;
}
.item2 {
grid-column: 2 / span 3;
}
grid-row attribute ¶ grid-row property defines the start and end positions of grid element rows. grid-row is grid-row-start and grid-row-end abbreviated property of the property..item1 {
grid-row: 1 / 4;
}
.item1 {
grid-row: 1 / span 2;
}
grid-area attribute ¶ grid-area attributes are grid-row-start , grid-column-start , and grid-column-end abbreviations for the grid-column-end attributes..item8 {
grid-area: 1 / 2 / 5 / 6;
}
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
8.26.2. Grid element naming ¶
grid-area attribute allows you to name grid elements. grid-template-areas property to refer to. item1 named “myArea” and spans five columns:.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
`'' within single quotation marks, separated by spaces..item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
.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 ¶
.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; }
@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; }
}