CSS Grid Layout
This YouTube video was created by Steve Griffith.
The CSS Grid Layout is a two-dimensional grid system used to layout major page areas or small user interface elements. The grid layout enables an author to align elements into columns and rows.
CSS Grid Terminology
Like many technology, there are special terms that are used when discussing CSS Grid.
| Term | Meaning |
|---|---|
| Grid Container | The element that display: grid is applied |
| Grid Item | The direct child of a grid container |
| Grid Lines | The dividing lines that make up the grid structure, which run both vertically (columns) and horizontally (rows) |
| Grid Track | The space between two grid lines (aka a single column or a single row) |
| Grid Cell | A single unit of the grid |
| Explicit Grid | The grid column and rows defined in CSS Rules |
| Implicit Grid | The grid column and rows auto-generated by the browser, but not defined |
Defining a Grid
The rule display: grid is use to create a grid container with an explicit grid of 0 columns and 0 rows. However, the browser will create a implicit grid of 1 columns and as many rows as there are direct children. We can see the results by added grid-gap between the grid cells.
No Grid
Implicit Grid with Gap
The properties grid-template-columns and grid-template-rows is use to create an explicit grid. These properties take a list of sizes, with size representing a column or a row.
Explicit Grid with Gap
The repeat() function can be used to create a list of items with all the same value. The function takes two values, the first being the number of items to create, and the second the value of each time.
Using Repeat()
Placing Grid Items
By default the browser will fill a grid with grid items based on their source order, with each item taking one grid cell. But by using the grid-column-start, grid-column-end, grid-row-start and grid-row-end, it is possible to place items anywhere on a grid.
Placing Grid Items
As seen in the example above, if only a start or an end is provided the grid item will span 1 grid column or row. However, it is possible to have items span multiple cells by including both a start and end value or by using the span keyword. It is also convenient to use the grid-column and grid-row shortcut properties that will accept both the start and end values separated by a /
Spanning Grid Items
It is also possible to have more than one grid item occupy a single grid cell, cause the grid items to overlap. In order to achieve overlapping, it is necessary that grid items occupying the same grid cell, explicit set a column and row start and end.
Overlapping Grid Items
Using Grid Areas
Another way of placing items is to use grid areas. Use the grid-template-areas property to create the different grid areas. Grid areas are represented by a grid name. The . can be used to represent a part of the grid where there is no grid areas. Use the grid-area property with the desire grid area name on a grid item to place that item in the grid area.
Grid Areas
Auto-Fill and Auto-Fit
The auto-fill and auto-fit keyword can be used with the repeat function to auto-generate columns and rows.
The auto-fill keyword fills a row with as many columns as it can fit, even if there is no content to place inside.
The auto-fit keyword fits the available columns (and content) into the space by expanding them so that they take up any available space.
Auto-Fill
Auto-Fit
Grid Alignment
There are six CSS properties that can be used to for alignment with CSS Grid. They are justify-content, align-content, justify-items, align-items, justify-self, and align-self.
In the case that the grid does not take up the entire space of the grid container, the properties justify-content and align-content can be used to align the grid within the grid container along the horizontal and vertical axis.
Note
Unlike Flexbox, justify-content and align-content do not change the axis they align.
Justify / Align Content - Center
To align ALL grid items within a their grid cells, use justify-items and align-items. By default, these properties are set to stretch.
Note
A background was added to the example below to simulate vertical grid lines.
Justify / Align Items - Default
Justify / Align Items - Center
Nested Grids
In the real world, very rarely are elements all contained inside a single parent, and children only one level deep. Most HTML structures are much more complex.
In CSS Grid, it is possible for a grid item to also be a grid container. When this happens, a nested grid is created.
A method for working with nested grids is to overlap the grids. This overlapping can partial overlap or one grid can completely lay on top of another.