gpt4 book ai didi

css - 如何跨越所有动态行的网格单元格?

转载 作者:行者123 更新时间:2023-12-05 06:56:36 24 4
gpt4 key购买 nike

<分区>

附加示例正常工作,.container 的第一个子项跨越所有行,但问题是 grid-row-end 值依赖于div.container 的一些 child 。是否可以在没有魔法常量 (4) 且不更改 HTML 结构的情况下执行此操作。不幸的是,grid-row-end:-1 仅适用于显式网格。

    .container {
display:grid;
grid-gap: 0.4em;
}
.container > * {
background-color: lightgray;
}
.container *:first-child {
grid-column: 1;
grid-row-start: 1;
grid-row-end: 4;
}
.container *:not(:first-child) {
grid-column: 2;
}
<div class="container">
<div>IMG</div>
<div>A</div>
<div>B</div>
<div>...</div>
</div>

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