How to make flexible columns by content? - html

Question

How to make flexible columns by content?
In this case, I need 4 columns if there is everything okay, but in any cases if list item is bigger than it needed I need make less columns. Prefer only CSS solution.
It is logical that this grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr)); expression should have worked, but min-content and max-content is not working with "fr" units.
.parent {
display: flex;
}
.wrapper {
width: 450px;
padding: 15px;
margin: 0 auto;
box-sizing: border-box;
background-color: #d4d1d1;
}
.wrapper:first-child {
background-color: #cc8b8b;
}
.list {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 1fr);
// grid-template-columns: repeat(auto-fill, minmax(min-content, 25%));
justify-content: center;
padding: 0;
margin: 0;
border: 1px dashed green;
}
.list__item {
display: flex;
flex-direction: column;
list-style: none;
align-items: center;
text-align: center;
border: 1px solid black;
}
.list__item-img {
width: 91px;
height: 91px;
background-color: #eaeaea;
}
<div class="parent">
<div class="wrapper">
<ul class="list">
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Lorem</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Lorem</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Lorem</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Lorem</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Lorem</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Lorem</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Lorem</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Lorem</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Lorem</span>
</li>
</ul>
</div>
<div class="wrapper">
<ul class="list">
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Very/long/word</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Very/long/word</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Very/long/word</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Very/long/word</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Very/long/word</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Very/long/word</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Very/long/word</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Very/long/word</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Very/long/word</span>
</li>
</ul>
</div>
</div>

Answer 1

Have you tried using display: flex on .list element instead of using grid? Once that's set, you need to set a min-width property for the columns and by using flex-wrap: wrap the rows can collapse if the width of the items put together exceeds the full width of the container.