使用 CSS 网格布局跨越所有列/行的项目

Items that span all columns/rows using CSS grid layout(使用 CSS 网格布局跨越所有列/行的项目)

问题描述

随着 CSS 网格布局模块即将在 Firefox 和 Chrome 中发布，我想我会尝试掌握如何使用它.

With the CSS Grid Layout Module soon shipping in Firefox and Chrome, I thought that I'd try to get a handle of how to use it.

我尝试创建一个简单的网格，其中一个项目 a 跨越所有行的左侧，其他项目(b、c、d、e 等)跨越各个行的右侧.跨越行右侧的项目数量是可变的，因此可能有 b、c、d、e 等，所以我使用 grid-auto-rows 属性.因此，我无法为 a 定义固定数量的行来跨越，但我希望 a 跨越 所有 可用的行.

I've tried to create a simple grid with one item a spanning the left side of all of the rows, with the other items (b, c, d, e, etc.) spanning the right side of individual rows. The amount of items spanning the right side of the rows is variable, so there might be any combination of b, c, d, e, etc., so I'm using the grid-auto-rows property. As such, I cannot define a fixed number of rows for a to span, but I would like a to span all available rows.

#container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-rows: auto;
    grid-template-columns: [left] 4rem [right] 1fr;
    margin: 0rem auto;
    max-width: 32rem;
}
#a {
    background: lightgreen;
    grid-column: left;
    grid-row: 1 / auto;
    justify-self: center;
}
#b {
    grid-area: auto / right;
    background: yellow;
}
#c {
    grid-area: auto / right;
    background: pink;
}
#d {
    grid-area: auto / right;
    background: lightskyblue;
}
#e {
    background: plum;
    grid-area: auto / right;
}

<div id="container">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
    <div id="d">d</div>
    <div id="e">e</div>
</div>

我应该怎么做才能使 a 跨越所有行而不知道最终会有多少行?

What should I do to make a span all rows without knowing how many rows there will end up being?

推荐答案

我遇到了同样的情况，找到了一个干净的解决方案.

I had the same situation and found a clean solution.

尝试使用巨大的行跨度值，而不是:

Instead of using a huge row span value, try:

grid-column: 1/-1;

由于负数从右开始计数，此代码指定 grid-column 到最后一列的末尾.

As negative number counts from the right, this code specifies the grid-column to the end of the last column.

注意:如果这不适用，请在下面的评论中查看 Jonny Green 的解决方案.

Note: In case this doesn't apply, check Jonny Green's solution in the below comment.

这篇关于使用 CSS 网格布局跨越所有列/行的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！