gpt4 book ai didi

带外列的 Css 网格自动流 minmax

转载 作者:行者123 更新时间:2023-11-28 01:07:37 24 4
gpt4 key购买 nike

您好,我想使用网格的repeatauto-fill,但外部列 左右设置为 1vw(垂直宽度单位)创建一些填充

不确定如何设置网格项以使用自动填充并忽略设置为 1vw

body, html {
margin: 0;
padding: 0;
}

ul {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1vw repeat(auto-fill, minmax(200px , 1fr)) 1vw;
grid-gap: 0.5vw;
}

li {
text-align: center;
list-style: none;
background: peachpuff;
padding: 0.5em;
}
<ul>
<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>

最佳答案

你想多了。只需给 1vwul 左/右 margin 并完全删除那些网格列。或者更简单,98vwmargin:auto

width

body, html {
margin: 0;
padding: 0;
}

ul {
margin: auto;
width:98vw;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px , 1fr));
grid-gap: 0.5vw;
}

li {
text-align: center;
list-style: none;
background: peachpuff;
padding: 0.5em;
}
<ul>
<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>

关于带外列的 Css 网格自动流 minmax,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52271656/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com