Font Awesome Free 5.13.0 by @fontawesome - License - (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)

Grids (CSS)

The main idea of CSS Grids

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

Grid layout example

(image source )