将元素拉伸到自动计算的网格的末端，而不仅仅是显式网格 [英] Stretch an element to the end of the automatically calculated grid, not just the explicit grid
本文介绍了将元素拉伸到自动计算的网格的末端，而不仅仅是显式网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在CSS网格中，可以使用 grid-column：1 / -1 在整个 explicit 网格中拉伸元素。但是，如果您添加新元素，并且网格自动包含的列数比明确说明的多，则效果不一样。
我可以输入任何值代替 -1 来迫使项目一直延伸到
在下面的示例中，因为 grid-auto-flow 设置为列，多余的元素会添加新列。我希望 .stretch 元素拉伸整个网格宽度，而不仅仅是拉伸指定的3x3网格的宽度。
< pre class = snippet-code-css lang-css prettyprint-override>
.grid {display：grid; grid-template-rows：1fr 1fr 1fr; grid-template-columns：1fr 1fr 1fr; grid-auto-flow：列；宽度：300像素；}。item {边框：1像素纯红色； padding：15px;}。stretch {grid-column：1 / -1;}
< div class = grid> < div class = stretch item>拉伸的< / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div>< / div>
解决方案
一个 hacky 想法是使元素跨越大量列：
.grid {display：grid; grid-template-rows：1fr 1fr 1fr; grid-template-columns：1fr 1fr 1fr; grid-auto-flow：列；宽度：300像素；}。item {边框：1像素纯红色； padding：15px;}。stretch {grid-column：span 20;}
< div class = grid> < div class = stretch item>拉伸的< / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div>< / div>< div class = grid> < div class = stretch item>拉伸的< / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div>< / div>
请注意仅当您未指定 grid-column-gap 并且您使隐式新列具有 auto 宽度。
添加空格会破坏它：
.grid {display：grid; grid-template-rows：1fr 1fr 1fr; grid-template-columns：1fr 1fr 1fr; grid-column-gap：1px; grid-auto-flow：列；宽度：300像素；}。item {边框：1像素纯红色； padding：15px;}。stretch {grid-column：span 20;}
< div class = grid> < div class = stretch item>拉伸的< / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div>< / div>< div class = grid> < div class = stretch item>拉伸的< / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div>< / div>
隐式与 auto 不同的列会破坏它：
.grid {display：grid; grid-template-rows：1fr 1fr 1fr; grid-template-columns：1fr 1fr 1fr; grid-auto-columns：10px; grid-auto-flow：列；宽度：300像素；}。item {边框：1像素纯红色； padding：15px;}。stretch {grid-column：span 20;}
< div class = grid> < div class = stretch item>拉伸的< / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div>< / div>< div class = grid> < div class = stretch item>拉伸的< / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div>< / div>
如果要考虑间隙，只需考虑边距，并在要定义宽度的情况下在元素上定义宽度。
.grid {display：grid; grid-template-rows：1fr 1fr 1fr; grid-template-columns：1fr 1fr 1fr; grid-auto-flow：列；宽度：300像素； margin-left：-10px;}。item {border：1px solid red;填充：15px; margin-left：10px;}。stretch {grid-column：span 20;}。item：nth-child（n + 8）{border-color：blue; min-width：40px;}
< div class = 网格> < div class = stretch item>拉伸的< / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div>< / div>< div class = grid> < div class = stretch item>拉伸的< / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div> < div class = item> 。 < / div>< / div>
In a CSS grid, you can use grid-column: 1 / -1 to stretch an element across the entire explicit grid. However, if you add new elements and the grid automatically has more columns than explicitly stated, this doesn't have the same effect.
Is there any value I can put instead of -1 that will force the item to stretch all the way to the end of the grid?
In the following example, because grid-auto-flow is set to column, the extra elements add new columns. I want the .stretch element to stretch the entire width of the grid, not just the width of the specified 3x3 grid.
.grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: column;
width: 300px;
}
.item {
border: 1px solid red;
padding: 15px;
}
.stretch {
grid-column: 1 / -1;
}
<div class="grid">
<div class="stretch item">
Stretched
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
</div>
解决方案
One hacky idea is to make the element span a large number of columns:
.grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: column;
width: 300px;
}
.item {
border: 1px solid red;
padding: 15px;
}
.stretch {
grid-column: span 20;
}
<div class="grid">
<div class="stretch item">
Stretched
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
</div>
<div class="grid">
<div class="stretch item">
Stretched
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
</div>
Pay attention as this hack works only if you don't specify grid-column-gap and you keep the implicit new column to have auto width.
Adding gaps will break it:
.grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap:1px;
grid-auto-flow: column;
width: 300px;
}
.item {
border: 1px solid red;
padding: 15px;
}
.stretch {
grid-column: span 20;
}
<div class="grid">
<div class="stretch item">
Stretched
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
</div>
<div class="grid">
<div class="stretch item">
Stretched
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
</div>
Making the implicit column different from auto will break it:
.grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-columns:10px;
grid-auto-flow: column;
width: 300px;
}
.item {
border: 1px solid red;
padding: 15px;
}
.stretch {
grid-column: span 20;
}
<div class="grid">
<div class="stretch item">
Stretched
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
</div>
<div class="grid">
<div class="stretch item">
Stretched
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
</div>
If you want to consider gaps simply consider margin and in case you want to define width define it on the elements.
.grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: column;
width: 300px;
margin-left:-10px;
}
.item {
border: 1px solid red;
padding: 15px;
margin-left:10px;
}
.stretch {
grid-column: span 20;
}
.item:nth-child(n + 8) {
border-color:blue;
min-width:40px;
}
<div class="grid">
<div class="stretch item">
Stretched
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
</div>
<div class="grid">
<div class="stretch item">
Stretched
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
<div class="item">
.
</div>
</div>
这篇关于将元素拉伸到自动计算的网格的末端，而不仅仅是显式网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
