| tree_title | description | last_modified |
|---|---|---|
Grids |
The main idea of CSS Grids |
2020-12-31 13:17:37 UTC |
- Grid with horizontal rows and vertical columns
- Row height and column width can be different per row/column
- Gaps between each row and between each column called gutters
Grid is enabled at the level of the container by setting display: grid; on it
Grids are a good option whenever you want to define a two-dimensional layout for your page.
Example (with indication of rows and columns as shown by Firefox Grid Inspector):
Simple way to achieve it: CSS Grid: Holy Grail Layout
How to achieve it: Full-Bleed Layout Using CSS Grid