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's display property is set to grid or inline-grid, it becomes a grid container, and all direct child elements of this element become grid elements.

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 image below, you can see a green-boxed track—the first row track of the grid. The second row has three white-boxed 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 that defines a grid with three equally wide tracks that expand and contract with 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 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 image below, I will highlight the first grid cell.

Grid Area

A grid element can extend one or more cells in the direction of rows or columns, creating a grid area. The shape of a grid area should be rectangular—you cannot create a "L" shaped grid area. The highlighted grid area in the image below extends two columns and two rows.

Grid Column

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

Grid Row

The horizontal line direction of a grid element 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:

.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 known as grid lines.

Grid creates numbered grid lines for positioning 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 following diagram defines four vertical and four horizontal grid lines:

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

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

The following example sets 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;
}

The following example sets 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 with a CSS Grid Layout Game.