CSS Grid Container

CSS Grid Container

A CSS grid container is an element that establishes a Grid formatting context for its contents. It is created by applying display: grid or display: inline-grid to an element.

The in-flow children of a grid container become grid items. Grid container properties can then define columns, rows, gaps, alignment, automatic tracks, and other parts of the Grid layout.

Creating a Grid Container

A Grid layout begins by changing an element's display value to grid or inline-grid.

.grid-container {
  display: grid;
}

This establishes a new Grid formatting context for the element's contents. Its in-flow children participate in the Grid layout as grid items.

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

No additional declaration is required on these child elements to make them grid items.

display: grid

The grid value creates a block-level grid container.

.grid-container {
  display: grid;
}

The element participates in the surrounding layout as a block-level box while its contents are laid out using Grid.

Defining columns makes the Grid structure easier to see.

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

This creates a block-level grid container with three equal column tracks.

display: inline-grid

The inline-grid value creates an inline-level grid container.

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

The contents are still arranged using Grid, but the grid container itself participates in the surrounding layout as an inline-level box.

This is useful when a Grid layout should remain part of an inline formatting context instead of behaving like a block-level container.

Grid Items

The in-flow children of a grid container become grid items.

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

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

The three child elements become grid items and are automatically placed into the defined grid.

Grid items can later be positioned, aligned, or made to span multiple tracks using Grid item properties.

Direct Children

Grid layout applies to the grid items generated from the grid container's contents. Descendants inside a grid item do not automatically participate in the outer grid.

<div class="grid-container">
  <div class="item">
    <p>Nested content</p>
  </div>
  <div class="item">Item 2</div>
</div>

The two elements with the item class participate in the outer Grid layout. The paragraph remains content inside the first grid item.

A grid item can establish its own Grid or Flexbox layout for its contents when another layout context is needed.

Grid Container Properties

Grid container properties define the structure, spacing, alignment, and automatic behavior of the Grid layout.

These properties are applied to the grid container. Other Grid properties are applied directly to individual grid items when their placement or alignment needs to differ.

Defining Grid Tracks

Creating a grid container does not require you to explicitly define tracks, but most Grid layouts define columns, rows, or both.

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

This creates three column tracks. The first is 200 pixels wide, while the remaining two share the available flexible space.

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

This example explicitly defines three columns and two rows. The upcoming Grid Columns & Rows and Grid Tracks tutorials examine track definitions in greater detail.

Automatic Placement

Grid items do not have to be manually positioned. When explicit placement is not provided, the Grid auto-placement algorithm places items into available grid cells.

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

If the container has six items, they are automatically placed into the grid in source order, filling available cells according to the grid's auto-placement behavior.

The grid-auto-flow property can be used when different automatic placement behavior is needed.

Grid Container Sizing

A grid container can be sized with the same CSS sizing properties used by other elements.

.grid-container {
  display: grid;
  width: 80%;
  max-width: 900px;
}

The available space inside the grid container influences how flexible tracks such as those using fr units are sized.

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

After accounting for the fixed track and other relevant sizing requirements, the flexible track can use a share of the remaining space according to the Grid sizing algorithm.

Nested Grid Containers

A grid item can also become a grid container for its own contents.

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

<div class="outer-grid">
  <div class="inner-grid">
    <div>A</div>
    <div>B</div>
  </div>
  <div>Item 2</div>
</div>

The inner-grid element is a grid item in the outer grid and a grid container for its own children.

A nested grid normally establishes its own independent tracks. The separate subgrid feature can allow certain nested grids to use tracks defined by a parent grid, which is a more advanced Grid technique.

CSS Grid Container Example

The following example compares normal block layout with display: grid and display: inline-grid. Open the example in the editor and change the display values or column definitions to see how the containers respond.

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