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.