Within a container grid, I have a variable number of child items with different widths.
- I am looking to use CSS grid to arrange them so that each column has equal width.
- The width of each column should be based on the widest child item.
My initial approach was:
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max-content, 1fr));
}
However, this code did not produce the desired result:
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max-content, 1fr));
}<div class="container">
<div class="children"> Very long text </div>
<div class="children"> long text </div>
<div class="children"> text</div>
<div class="children"> text</div>
<div class="children"> text</div>
<div class="children"> text</div>
</div>In this scenario, if only 2 columns could fit, the expected layout is as follows:
Very long text | long text |
text | text |
text. | text |
Similarly, if only 3 columns could fit, the expected layout would be:
Very long text | long text | text |
text | text | text |
In both cases, the width of the columns should be based on the max content (i.e., "very long text").
What would be the simplest way to achieve this layout?