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; }
}