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

问题描述

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

请尝试:

    grid-column: 1/-1;

当负数从右边开始计数时，此代码指定到最后一列末尾的网格列.

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

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