CSS Grid Layout Module

Header
Menu
Main
Right
Footer

Try It Yourself

Grid Layout

The CSS Grid Layout Module provides a grid-based layout system with rows and columns, making web page design easier without the need for floats and positioning.

Browser Support

All modern browsers support the grid properties.

57.0 16.0 52.0 10 44

Grid Elements

The grid layout consists of a parent element and one or more child elements.

Example

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
1
2
3
4
5
6
7
8
9

Try It Yourself

Display Property

When the Display attribute of an HTML element display The property is set to grid or inline-grid when it becomes a grid container.

Example

.grid-container {
  display: grid;
{}

Try It Yourself

Example

.grid-container {
  display: inline-grid;
{}

Try It Yourself

All direct child elements of the grid container will automatically become grid items.

Grid Columns (Grid Columns)

The vertical line of a grid item is called a column.

Grid Rows (Grid Rows)

The horizontal line of a grid item is called a row.

Grid Gaps (Grid Gaps)

The space between each column/row is called a gap.

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

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

Example

grid-column-gap This property sets the gap between columns:

.grid-container {
  display: grid;
  grid-column-gap: 50px;
{}

Try It Yourself

Example

grid-row-gap This property sets the gap between rows:

.grid-container {
  display: grid;
  grid-row-gap: 50px;
{}

Try It Yourself

Example

grid-gap This property is a shorthand for the grid-row-gap and grid-column-gap properties:

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
{}

Try It Yourself

Example

grid-gap The property can also be used to set the row gap and column gap to a single value:

.grid-container {
  display: grid;
  grid-gap: 50px;
{}

Try It Yourself

Grid Lines (Grid Lines)

The lines between columns are called column lines (column lines).

The lines between rows are called row lines (row lines).

When placing the grid item inside the grid container, please refer to the row number:

Example

Place the grid item on column line 1 and end it at column line 3:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
{}

Try It Yourself

Example

Place the grid item on line 1 and end it at line 3:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
{}

Try It Yourself