Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)

Grids (CSS)

The main idea of CSS Grids

Basic idea

Grid

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

Resources