Grid Basics

CSS Grid Basics

CSS Grid is a layout system designed for arranging content in rows and columns. It provides control over the size, spacing, and placement of items within a two-dimensional layout.

What is CSS Grid?

CSS Grid Layout is a layout system for arranging elements in rows and columns. Unlike Flexbox, which primarily lays out items along one dimension at a time, Grid can control rows and columns together.

Grid is useful for page sections, groups of cards, image galleries, and other layouts where content needs to follow a structured arrangement of columns and rows.

Creating a Grid Container

CSS Grid begins by setting the display property of a container to grid.

.container {
  display: grid;
}

The element becomes a grid container, and its direct children become grid items.

Grid Items

The direct children of a grid container become grid items. You do not need to add display: grid; to each item.

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

By defining columns and rows on the container, these items can be arranged into a grid.

Creating Grid Columns

The grid-template-columns property defines the columns of a grid and their sizes.

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

This creates three columns, each 200 pixels wide.

Creating Grid Rows

The grid-template-rows property can define the height of rows in the grid.

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

This example creates two columns and two rows. Each row is 100 pixels high.

Rows can also be created automatically as additional grid items are added, so explicit row sizes are not required for every grid.

The fr Unit

CSS Grid introduces the fr unit, which represents a fraction of the available space in the grid container.

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

This creates three columns that share the available space equally.

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

In this example, after other track sizing requirements are accounted for, the first flexible column receives twice the share of the remaining space assigned to the second flexible column.

Repeating Grid Tracks

The CSS repeat() function provides a shorter way to define repeated grid tracks.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

This is a convenient way to create three equal flexible columns without writing 1fr three times.

Spacing with gap

The gap property creates space between grid rows and columns.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

The gap appears between the grid tracks rather than around the outside edge of the grid container.

You can also use row-gap and column-gap when different spacing is needed between rows and columns.

Placing Grid Items

Grid items are placed into available grid cells automatically by default, but CSS can also control how many columns or rows an item spans.

.wide {
  grid-column: span 2;
}

This item spans two grid columns instead of occupying a single column.

Flexbox vs. Grid

Flexbox and Grid solve different but overlapping layout problems. Flexbox is primarily designed for arranging items along one dimension at a time, while Grid is designed to work with rows and columns together.

Flexbox is often convenient for navigation, controls, and groups of items arranged in a row or column. Grid is often useful when the layout needs a more structured relationship between rows and columns.

There is no requirement to choose only one. Flexbox and Grid are commonly used together in different parts of the same page.

Try CSS Grid

Edit the example to change the number and size of the grid columns. Try changing repeat(3, 1fr) to repeat(2, 1fr), adjust the gap, or make an item span multiple columns.

When to Use Grid

CSS Grid works well when a layout needs rows and columns that relate to one another. It can be used for simple groups of cards as well as larger page layouts.

For beginners, starting with display: grid;, grid-template-columns, gap, and simple item spanning provides enough Grid knowledge to create many useful layouts.

Summary

CSS Grid provides a two-dimensional layout system for arranging content in rows and columns. Setting display: grid; creates a grid container whose direct children become grid items. Properties such as grid-template-columns, grid-template-rows, and gap define the grid, while units such as fr and functions such as repeat() make flexible layouts easier to create.

The next tutorial covers Media Queries and explains how CSS can apply different styles based on characteristics such as the width of the browser viewport.