css网格创建具有自动填充的空列。
css网格创建具有自动填充的空列。
提问于 2018-11-07 20:05:56
这段代码应该可以很好地说明这一点，但下面是我想要实现的目标：
我希望我的第一行是grid-column: 1/-1，这样它就可以跨越网格。第一行并不总是存在。
网格中的其他列应该是grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));，我不知道其中有多少列在任何时候都会出现。
这里的问题是:当出现生成行时，下面的列表现为auto-fill，而不是auto-fit。代码片段显示了生成列的存在如何改变后续列的行为。屏幕截图显示正在创建的额外列。
您需要运行片段全屏才能看到它的作用。
如有任何建议，将不胜感激。谢谢!
* {
box-sizing: border-box;
}
.box__title {
grid-column: 1 / -1;
}
.box > * {
border: 1px solid gray;
padding: 20px;
margin: 0;
background: white;
}
.box {
border: 1px solid gray;
background: #efefef;
padding: 20px;
margin: 20px;
display: grid;
grid-template-rows: auto;
grid-gap: 20px;
}
.box--fit-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.box--fill-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.box--grid > * {
border: 1px solid gray;
padding: 20px;
margin: 0;
}<div class="box box--fit-grid">
<h2 class="box__title">The top two boxes should use auto-fit</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
<div> asdf sadf sa dfsa dfLorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
<div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
</div>
<div class="box box--fit-grid">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
</div>
<div class="box box--fill-grid">
<h2 class="box__title">The bottom two boxes should use auto-fill</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
<div> asdf sadf sa dfsa dfLorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
<div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
</div>
<div class="box box--fill-grid">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-11-08 00:55:38
当使用auto-fit或auto-fill时，所有网格项中的容器因素。
在您的布局中，有四个网格项。这将创建四个列轨道，如您的图像所示：
然后将第一行设置为：
.box__title {
grid-column: 1 / -1;
}锁在四列里。因此，auto-fit无法扩展行中的三个后续项，因为第四列不会折叠。
没有第一项和grid-column: 1 / -1规则，只有三列和auto-fit / auto-fill工作与预期相同。
但也许你不需要auto-fit或auto-fill。网格自动布局算法可能足以处理这项工作。
.box__title {
grid-column: 1 / -1;
}
.box--fit-grid {
grid-template-columns: repeat(3, minmax(250px, 1fr));
}
.box {
border: 1px solid gray;
background: #efefef;
padding: 20px;
margin: 20px;
display: grid;
grid-template-rows: auto;
grid-gap: 20px;
}
.box>* {
border: 1px solid gray;
padding: 20px;
margin: 0;
background: white;
}
.box--grid>* {
border: 1px solid gray;
padding: 20px;
margin: 0;
}
* {
box-sizing: border-box;
}<div class="box box--fit-grid">
<h2 class="box__title">The top two boxes should use auto-fit</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
<div> asdf sadf sa dfsa dfLorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
doloremque. Blanditiis.</div>
<div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
doloremque. Blanditiis.</div>
<div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
doloremque. Blanditiis.</div>
<div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
doloremque. Blanditiis.</div>
<div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
doloremque. Blanditiis.</div>
<div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
doloremque. Blanditiis.</div>
<div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
doloremque. Blanditiis.</div>
</div>
更多信息：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53197024
复制相关文章
相似问题
腾讯云开发者
