如何解决如何按内容制作灵活的列?
如何按内容制作灵活的列?
在这种情况下,如果一切正常,我需要4列,但是在任何情况下,如果列表项大于所需的列数,则我需要减少列数。只喜欢CSS解决方案。
符合逻辑的是,该grid-template-columns: repeat(auto-fill,minmax(min-content,1fr));
表达式应该起作用,但是min-content和max-content不适用于“ fr”单位。
.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,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>
解决方法
您是否尝试过在display: flex
元素上使用.list
而不是使用网格?设置好之后,您需要为列设置min-width
属性,并且通过使用flex-wrap: wrap
,如果放在一起的项的宽度超过容器的整个宽度,则行可能会折叠。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。