When you want to have multiple child elements in a container with same width, you use repeat() function and set the width for the columns.
Just like this:
The problem with that structure is that it’s responsive. So, to make it responsive we can use minmax() with repeat(). But that alone won’t fix the responsiveness issue. We need to auto placement the child elements when the window size decreases.
If you want to divide the width of a container between it’s elements then go for auto-fit.
Just like this:
But if you don’t want to divide the elements equally and but keep the width same for all elements then go for auto-fill.
Let’s compare both:
You won’t see any difference if the elements combined minimum width is equal or greater than the container’s minimum width.
auto-fill auto-fit containers examples grid
