CSS Grid Layout

Definition of Grid Areas This is the grid we worked with: nine grid elements automatically placed inside three equal columns, three equal rows, divided by 20px wide gutters.

Display Property

An HTML element becomes a grid container when its display property is set to grid or inline-grid.

Example

display:grid

Example

display:inline-grid

All direct children of the grid container automatically become grid items.


Grid Columns

The vertical lines of grid items are called columns.


Grid Rows

The horizontal lines of grid items are called rows.


Grid Gaps

The spaces between each column/row are called gaps.

You can adjust the gap size by using one of the following properties:

  • grid-column-gap
  • grid-row-gap
  • grid-gap