gpt4 book ai didi

html - 将元素拉伸(stretch)到自动计算的网格的末尾,而不仅仅是显式网格

转载 作者:可可西里 更新时间:2023-11-01 13:41:26 25 4
gpt4 key购买 nike

在 CSS 网格中,您可以使用 grid-column: 1/-1 将元素拉伸(stretch)到整个 explicit 网格。但是,如果您添加新元素并且网格自动具有比明确说明更多的列,则不会产生相同的效果。

有什么值可以代替 -1 来强制元素一直延伸到网格的末端吗?

在下面的示例中,因为 grid-auto-flow 设置为 column,所以额外的元素会添加新的列。我希望 .stretch 元素拉伸(stretch)整个网格宽度,而不仅仅是指定 3x3 网格的宽度。

.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>

最佳答案

一个hacky的想法是让元素跨越大量的列:

.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>

请注意,只有当您未指定 grid-column-gap 并且您将隐式新列保持为 auto 宽度时,此 hack 才有效。

添加间隙会破坏它:

.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>

使隐式列不同于 auto 会破坏它:

.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>


如果你想考虑间隙,只需考虑边距,如果你想定义宽度,请在元素上定义它。

.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>

关于html - 将元素拉伸(stretch)到自动计算的网格的末尾,而不仅仅是显式网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56875326/

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