CSS Grid Layout

A grid is a set of intersecting horizontal and vertical lines that define the columns and rows of the grid.

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

Here is a simple web layout using grid layout, consisting of six columns and three rows:

Try it Yourself »

Browser Support

The latest versions of some browsers currently support grid layout.

Grid Elements

A 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>

Display Property

When an HTML element has its display property set to grid or inline-grid, it becomes a grid container, and all its direct child elements become grid items.

Example

.grid-container {
  display: grid;
}

Example

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

Grid Tracks

We define rows and columns in a grid using the grid-template-columns and grid-template-rows properties.

These properties define the grid tracks, which are the spaces between any two lines in the grid.

In the figure below, you can see a green box representing the first row track of the grid. The second row has three white box tracks.

Here is an example where we use the grid-template-columns property to create four columns in the grid container:

Example

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Here is an example where we use the grid-template-rows property to set the height of the rows in the grid container:

Example

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

fr Unit

Tracks can be defined using any length unit.

The grid introduces the fr unit to help us create flexible grid tracks. One fr unit represents one part of the available space in the grid container.

Here is an example where we define a grid with three equally wide tracks that grow and shrink according to the available space:

Example

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Grid Cell

A grid cell is the smallest unit in a grid element. Conceptually, it is similar to a table cell. Looking back at our previous example, once a grid element is defined within a parent element, its child elements will be arranged in each predefined grid cell. In the figure below, I will highlight the first grid cell.

Grid Area

A grid item can extend across one or more cells in the row or column direction, creating a grid area. The shape of a grid area should be rectangular—you cannot create an "L"-shaped grid area. The highlighted grid area in the figure below extends across 2 columns and 2 rows.

Grid Column

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

Grid Row

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

Grid Gap

A grid gap (Column Gap) refers to the horizontal or vertical space between two grid cells.

You can adjust the gap size using the following properties:

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

Here is an example using the grid-column-gap property to set the gap between columns:

Example

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

Here is an example using the grid-row-gap property to set the gap between rows:

Example

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

Example

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

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

Example

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

The grid-gap property can set both row and column gaps simultaneously:

Example

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

Grid Lines

The intersections between columns and rows are called grid lines.

Grid creates numbered grid lines to help position grid elements.

For example, in a three-column, two-row grid, there are four vertical grid lines (marked with gray circles) and three horizontal grid lines (marked with black circles).

Grid elements can be positioned using these line numbers.

The diagram below defines four vertical grid lines and four horizontal grid lines:

Grid line numbering depends on the writing mode of the text. In languages written from left to right, the grid line numbered 1 is on the left. In languages written from right to left, the grid line numbered 1 is on the right.

Next, I use the grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties to demonstrate how to use grid lines.

In the following example, we set a grid element to start at the first column and end at the third column:

Example

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

In the following example, we set a grid element to start at the first row and end at the third row:

Example

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

CSS Grid Properties

Next, we can test our learning outcomes with a CSS Grid Layout game.