How to add equal width columns in CSS Grid?

Sometimes, we want to add equal width columns in CSS Grid.

In this article, we’ll look at how to add equal width columns in CSS Grid.

How to add equal width columns in CSS Grid?

To add equal width columns in CSS Grid, we set the grid-auto-columns property.

For instance, we write

<div class="row">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

to add the nested divs.

Then we write

.row {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}

to make the outer div a grid container with display: grid;.

Then we use grid-auto-columns: minmax(0, 1fr); to make the inner divs columns with equal widths.

Conclusion

To add equal width columns in CSS Grid, we set the grid-auto-columns property.