CSS Grid Columns & Rows

CSS Grid columns and rows form the basic structure of a grid layout. Columns run along the inline axis, while rows run along the block axis.

The grid-template-columns and grid-template-rows properties define the tracks of the explicit grid and determine how much space those tracks occupy.

Defining Grid Columns

The grid-template-columns property defines the column tracks of the explicit grid.

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

This creates three columns, each 200 pixels wide. Each size listed in the property creates one column track.

Different sizes can be assigned to individual columns.

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

This grid still has three columns, but each column has a different width.

Defining Grid Rows

The grid-template-rows property defines the row tracks of the explicit grid.

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

This example defines three columns and two rows. The first row is 100 pixels tall and the second row is 150 pixels tall.

Columns and rows can therefore be defined independently while working together to form the Grid structure.

Fixed Track Sizes

Length units such as pixels can create tracks with fixed sizes.

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

Fixed track sizes are useful when part of a layout needs a predictable dimension, but they do not automatically adapt to changes in the available container space.

For flexible layouts, fixed tracks are often combined with flexible sizing values.

Percentage Track Sizes

Percentage values can size grid tracks relative to the corresponding size of the grid container.

.grid-container {
  display: grid;
  grid-template-columns: 30% 70%;
}

When the grid container has a definite inline size, these columns use 30 percent and 70 percent of that size.

Be careful when combining percentage tracks with gaps. The percentages size the tracks, while the gaps require additional space and can cause the grid to exceed the container.

.grid-container {
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 20px;
}

Flexible units such as fr are often more convenient when the tracks should divide the space remaining after gaps and other sizing requirements are considered.

The fr Unit

The fr unit represents a fraction of the available space in the grid container.

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

The three columns each receive an equal share of the available flexible space.

Different fractions can create proportional tracks.

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

After non-flexible sizing requirements are accounted for, the middle column receives two shares of the available flexible space while the first and third columns each receive one share.

Mixing Track Sizes

Grid tracks do not all need to use the same type of sizing value.

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

The first column uses a fixed size. The remaining flexible space is then divided between the second and third columns according to their flexible sizing factors.

This is useful for layouts such as a fixed-width sidebar beside flexible content.

.page-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
}

Using repeat()

The CSS repeat() function provides a shorter way to define repeating track patterns.

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

This is equivalent to writing four 1fr column tracks.

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

The function can also repeat more than one track size.

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

This produces four column tracks using the repeated pattern 100px 1fr 100px 1fr.

Columns, Rows, and Grid Items

The number of defined columns and rows does not have to match the number of grid items.

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

If the container has six automatically placed items, the first three can occupy the first row and the next three can occupy a second row.

Because only the columns were explicitly defined in this example, additional rows needed by auto-placement are created as part of the implicit grid.

Automatically Created Rows

When grid items require additional rows that were not defined by grid-template-rows, Grid can create implicit rows automatically.

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

The grid-auto-rows property controls the size of automatically created row tracks.

Similarly, grid-auto-columns can control automatically created column tracks when implicit columns are needed.

Spacing Between Columns and Rows

The gap property creates spacing between Grid tracks without requiring margins on individual grid items.

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

A single value sets both row and column gaps.

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

The row-gap and column-gap properties provide separate control when different spacing is needed in each direction.

Flexible and Responsive Columns

Flexible tracks allow Grid layouts to adapt as the grid container changes size.

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

The proportions remain flexible as the available space changes.

More advanced Grid layouts can combine functions such as repeat() and minmax() with the auto-fit or auto-fill keywords.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

This pattern can create a responsive set of columns without requiring a media query for every change in the number of columns. The upcoming repeat(), minmax(), and auto-fit & auto-fill tutorials cover these techniques in detail.

CSS Grid Columns & Rows Example

The following example defines three columns and two rows using different track sizes. Open the example in the editor and change the values to see how the Grid structure responds.

.grid-container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
  grid-template-rows: 80px 120px;
  gap: 10px;
}

Play in Editor