gpt4 book ai didi

css - 使元素跨越具有自动列的网格上的所有列

转载 作者:行者123 更新时间:2023-11-28 14:54:50 26 4
gpt4 key购买 nike

<分区>

我有一个带有自动列和 2 行的 CSS 网格,其中除特定元素外的所有元素都进入第一行。特殊元素放在第二行,应该填满所有列使用的整个空间。

目前的实现是这样的:

.TabArea {
display: grid;
grid-auto-columns: auto;
grid-template-rows: auto 1fr;
grid-auto-flow: column;

/* for visualization purposes */
background: gainsboro;
}

.Tab-title {
grid-row: 1;
}

.Tab-body {
grid-row: 2;
grid-column: 1 / -1;

/* for visualization purposes */
background: beige;
}
<div class="TabArea">
<div class="Tab-title">Title A</div>
<div class="Tab-title">Title B</div>
<div class="Tab-title">Title B</div>
<div class="Tab-body">content</div>
</div>

但如您所见,Tab-body 仅放置在第一列,尽管事实上还有其他列。如何让它跨越所有列?

https://stackoverflow.com/a/44052563/1045510 中的解决方案在这里不起作用,因为列数是可变的,列会占用最后的空间,将 Tab-title 推到左边。

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