CSS Layout CSS Grid

Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Grid Elements

A grid layout consists of a parent element, with one or more child elements.

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

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.