Introduction to CSS Grid Layout Basics – part II

NOTE: Before continuing with this article, please take a few minutes to read the previous installment – Introduction to CSS Grid Layout Basics – part I.
It covers most of the grid basics, like terminology, grid creation, grid item positioning etc.

This installment will only cover implicit grids, item layering, and aligning grid items and tracks.

Implicit grid

The explicit grid is defined by using the relevant CSS grid properties, like grid-template-rows, grid-template-columns and grid-template-areas.
But what if only 3 columns and 2 rows are specified, and item is placed outside this grid?
In that case, the browser will create an implicit grid to hold that item.

In a simple 3×2 grid (colored part), the grid column lines only go up to 4. But if we place an item in the 5th column, the browser will add 2 implicit columns to accommodate this item.

The size of these implicit grid tracks can be specified with the grid-auto-columns and grid-auto-rows properties. If these properties are not set, their default value is auto, which results in the implicit columns filling up the available space equally.

Grid items that are not explicitly placed will fill the grid up accordingly.

Layering grid items

Multiple items can be placed in the same grid cell, and can be layered by using z-index.

item-1 is positioned between columns 1 & 3, and rows 1 & 2. item-2 is positioned between columns 1 & 4, and rows 1 & 3.

By default, item-2 would sit on top of item-1; however assigning z-index: 1 to item-1, will result in it sitting on top of item-2.

Aligning grid items

Grid items can be aligned by applying justify-items (along the row axis – left to right) and align-items (along the column axis – top to bottom) properties on the grid container.
These properties support the following values:

start – aligns the content to the left/top end of the grid area
end – aligns the content to the right/bottom end of the grid area
center – aligns the content in the center of the grid area
stretch – fills the whole width/height of the grid area (this is the default)

Individual grid items can be self-aligned with the justify-self (along the row axis – left to right) and align-self (along the column axis – top to bottom) properties.
These properties support the following values:

start – aligns the content to the left/top end of the grid area
end – aligns the content to the right/bottom end of the grid area
center – aligns the content in the center of the grid area
stretch – fills the whole width/height of the grid area (this is the default)

Aligning grid tracks

Sometimes grid size can be less than the size of its grid container. In this case, grid tracks can be aligned relative to the grid container with justify-content (along the row axis – left to right) and align-content (along the column axis – top to bottom). These properties support the following values:

start – aligns the grid to the left/top end of the grid container
end – aligns the grid to the right/bottom end of the grid container
center – aligns the grid in the center of the grid container
stretch – resizes the grid items to allow the grid to fill the full width/height of the grid container
space-around – places an even amount of space between each grid item, with half-sized spaces on the far ends
space-between – places an even amount of space between each grid item, with no space at the far ends
space-evenly – places an even amount of space between each grid item, including the far ends

Final thoughts

With this article, our “Introduction to CSS Grid Layout Basics” series is done.
It’s in no way a definitive all-in-one guide, but hopefully it will put you on a right track to learn more about CSS grid. Hope you found it helpful.