Grid Item
Child Elements (Items)
Grid elements are contained in a grid container.
One grid item is included in each row and each column of a container by default, but you can style the grid items to span several rows and/or columns.
The grid-column Property:
Which column or columns to place an item on are specified by the grid-column attribute.
You specify the beginning and ending points of the item.
Note: The grid-column-start and grid-column-end properties can be referred to by its shorthand, grid-column property.
When placing an item, you can specify how many columns it will span by using the term “span” or by using the line numbers.
Example
Make “item1” start on column 1 and end before column 5:
.item1 {
grid-column: 1 / 5;
}
Example
Make “item1” start on column 1 and span 3 columns:
.item1 {
grid-column: 1 / span 3;
}
Example
Make “item2” start on column 2 and span 3 columns:
.item2 {
grid-column: 2 / span 3;
}
The grid-row Property:
The row on which to insert an item is specified by the grid-row property.
You specify the beginning and ending points of the item.
The grid-row-start and grid-row-end properties can be referred to by their shorthand, grid-row.
When placing an item, you can specify how many rows it will span by using the term “span” or by using line numbers:
Example
Make “item1” start on row-line 1 and end on row-line 4:
.item1 {
grid-row: 1 / 4;
}
Example
Make “item1” start on row 1 and span 2 rows:
.item1 {
grid-row: 1 / span 2;
}
The grid-area Property
The grid-row-start, grid-column-start, grid-row-end, and grid-column-end attributes can all be shortened to just the grid-area property.
Example
Make “item8” start on row-line 1 and column-line 2, and end on row-line 5 and column line 6:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
Example
Make “item8” start on row-line 2 and column-line 1, and span 2 rows and 3 columns:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
Naming Grid Items
Grid objects can also have names assigned to them using the grid-area attribute.
The grid container’s grid-template-areas attribute can be used to reference named grid objects.
Example
Item1 gets the name “myArea” and spans all five columns in a five columns grid layout:
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
Apostrophes (‘ ‘) define each row.
Within the apostrophes, each row’s columns are specified and spaced apart.
Note: A grid item without a name is indicated by a period symbol.
Example
Let “myArea” span two columns in a five columns grid layout (period signs represent items with no name):
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
To define two rows, define the column of the second row inside another set of apostrophes:
Example
Make “item1” span two columns and two rows:
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}
Example
Name all items, and make a ready-to-use webpage template:
.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';
}
The Order of the Items
The elements can be positioned anywhere we choose thanks to the Grid Layout.
It’s not necessary for the first item in the HTML code to be 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; }
Using media queries, you may change the order for specific 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; }
}
