这段代码使用css网格和minmax(30rem, 1fr)
。
grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
一切正常,但是当viewport父容器小于30rem时,会出现一个水平滚动条。我需要像
minmax(min(30rem, 100%), 1fr))
这样的东西。知道怎么做到吗?https://codepen.io/anon/pen/LmEyer
ul {
list-style-type: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
grid-auto-rows: 1fr;
grid-gap: 10px;
}
li {
background-color: #aaa;
padding: 0.5rem;
}
<ul class="list">
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<ul>
最佳答案
当屏幕宽度小于cc>时,听起来好像有一个断点。这需要一个媒体查询。
将此添加到代码中:
@media (max-width: 30rem) {
ul { grid-template-columns: 1fr; }
}
revised codepen
ul {
list-style-type: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
grid-auto-rows: 1fr;
grid-gap: 10px;
}
li {
background-color: #aaa;
padding: 0.5rem;
}
@media (max-width: 30rem) {
ul {
grid-template-columns: 1fr;
}
}
<ul class="list">
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<ul>