Grids (CSS)

Contents

• Basic idea
• Use cases
  • Holy grail layout
  • Full bleed layout
• Resources

Basic idea

(image source)

• 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

Use cases

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):

(image source)

Holy grail layout

(image source)

Simple way to achieve it: CSS Grid: Holy Grail Layout

Full bleed layout

(image source)

How to achieve it: Full-Bleed Layout Using CSS Grid

Resources

• CSS - The Complete Guide 2020 (incl. Flexbox, Grid & Sass)
• Grids
• CSS Grid: Holy Grail Layout
• Full-Bleed Layout Using CSS Grid