CSS Grid Item
Grid items are automatically assigned to the direct children of the grid container element. By default, there is one grid item for each row and column but we can specify it to span multiple rows or columns just like the grid items 1, 2, and 5 in the example below:
Example 1:
We will assign the first grid item to start at column line 1 and span up to 2 columns. The second grid item must start at column line 3 and row line 1 while spanning up to 2 rows. The fifth grid item must start column line 1 and row line 3 while spanning up to 3 columns.
1
2
3
4
5
The Grid-Area Property
This property is the shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties other than the grid-row and grid-column properties. Below is the syntax for this property:
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
Example 2:
For our next example, we will utilize the grid-area property to specify the details for grid item 4. In this first one, we will make our grid item 4 start row line 1 and column line 2 and end in row line 3 and column line 3.
1
2
3
4
5
6
7
8
Second, we will make grid item 4 start at row line 1 and column line 1 and end at row line 5 and column line 2.
Note: We can also use the "span n" for the end value in our grid-area property:
1
2
3
4
5
6
7
8
Naming Grid Items with Grid-Area
We can use the grid-area property to assign names in our grid items without having to input the values for column/row start and end. We will then use the grid-template-areas in our grid container to refer the names we have assigned.
Example 3:
In this quick example, we will name our grid items with header, menu, main, right, and footer using grid-area. We will then position them using the grid-template-areas.
Next is simple, we will make the first grid item to have a grid-area name of "myArea" and its grid-template-areas will be "myArea myArea myArea myArea myArea". This will make the first grid item to span all five columns in the first row:
Next is again naming the first grid item to "myArea" and the grid container's grid-template-areas value is "myArea myArea myArea . ." where a period represents grid items with no name:
To span both rows and columns for a grid item, add another layer for the values in grid-template-areas. In this next example, let the first grid item to span for 2 rows and 2 columns:
The Order of the Grid Items
The order of which we coded the grid items does not permanently set them to that order. We can still change their order thru the use of grid-area by stating their starting row and column.
Example 4:
In this example, we will rearrange each grid item using CSS grid-area even if we have arranged them in order in our HTML code.
We can also use this technique in combination with media queries by rearranging the grid items depending on the browser screen size. In the example below, the grid items will rearrange if the screen size is 992px or lower. Try to resize your browser window to see the effect!
The Justify-Self Property
This property is used to align grid items along its row axis.
Example 5:
In this example, we will apply right for the justify-self value of the first grid item and center for the sixth grid item:
The Align-Self Property
This property is the same above but only aligns a grid item along its column axis.
Example 6:
In this example, we will apply the start value for align-self of the first grid item and the value center for align-self of the sixth grid item:
