使用 CSS 网格交错两行或更多行

Question

我想创建这样的布局：


test	test	test
data-0	data-1	data-2
test	test	test
data-3	data-4	data-5

但是下面的代码产生了这个：


test	test	test	test	test	test
data-0	data-1	data-2	data-3	data-4	data-5

此示例显示 3 列、2*2 行和 6 个项目的布局。在实践中，我想使用 10 列、auto*2 行和动态数量的项目。作为奖励，如果列的数量根据可用宽度进行调整，那就太棒了。问题似乎是溢出元素只是添加到具有给定名称的第一行，而不是具有给定名称的第一行非完整行。

当前使用 react 的实现：

const items = new Array(6)
  .fill(undefined)
  .map((e, i) => ({ title: "test", data: "data-" + i }));

const root = (
  <div
    style={{
      display: "grid",
      gridTemplateColumns: "repeat(3, auto)",
      gridTemplateRows: "repeat(2, [title] auto [data] auto)",
    }}
  >
    {items.map((item, i) => (
      <React.Fragment key={i}>
        <div style={{ gridRow: "title" }}>{item.title}</div>
        <div style={{ gridRow: "data" }}>{item.data}</div>
      </React.Fragment>
    ))}
  </div>
);

ReactDOM.render(root, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

您还需要一些 css 类，您需要使用第 n 个子选择器设置位置：

.container {
    display: grid;
    grid-template-columns: repeat(3, 50px);
    grid-auto-rows:  30px;
    grid-auto-flow: column dense;
}


.title:nth-child(6n+3) {
    grid-column: 2;
    background-color: lightblue;
}
.data:nth-child(6n+4) {
    grid-column: 2;
    background-color: lightblue;
}

.title:nth-child(6n+5) {
    grid-column: 3;
    background-color: lightgreen;
}
.data:nth-child(6n) {
    grid-column: 3;
    background-color: lightgreen;
}

<div class="container">
<div class="title">title1</div>
<div class="data">data1</div>
<div class="title">title2</div>
<div class="data">data2</div>
<div class="title">title3</div>
<div class="data">data3</div>
<div class="title">title4</div>
<div class="data">data4</div>
<div class="title">title5</div>
<div class="data">data5</div>
<div class="title">title6</div>
<div class="data">data6</div>
<div class="title">title7</div>
<div class="data">data7</div>
<div class="title">title8</div>
<div class="data">data8</div>
<div class="title">title9</div>
<div class="data">data9</div>
<div class="title">title10</div>
<div class="data">data10</div>
<div class="title">title</div>
<div class="data">data</div>
<div class="title">title</div>
<div class="data">data</div>
</div>

Answer 2

最后：Subgrid - CSS - MDN

有个短视频例子：Don't Wait to Use Subgrid for Better Card Layouts

所提供的卡片布局无需更改即可用于所需的用例。网格组件的行跨度为 2（而不是 3）。

在撰写此答案时，子网格功能仅适用于 firefox。其他主要浏览器的实施已经开始。作为解决方法，该视频建议在 grid-template-rows: subgrid;.

之前使用 grid-template-rows: ...;

.table {
  display: grid;
  grid-template-columns: repeat(3, 5em);
  grid-template-rows: repeat(2, auto auto);
  gap: 1em;
}

.card {
  display: grid;
  grid-row: span 2;
  gap: 0;

  /* fallback for browsers that don't support subgrid with following behaviour:
       1fr: title gets as much space as it needs
      auto: data is assumed to be of fixed size
   */
  grid-template-rows: 1fr auto;

  /* enable subgrid */
  grid-template-rows: subgrid;
}

.title {
  background: lightblue;
}

<div class="table">
  <div class="card"><div class="title">long<br />title-0</div><div class="data">data-0</div></div>
  <div class="card"><div class="title">title-1</div><div class="data">data-1</div></div>
  <div class="card"><div class="title">title-2</div><div class="data">data-2</div></div>
  <div class="card"><div class="title">title-3</div><div class="data">data-3</div></div>
  <div class="card"><div class="title">title-4</div><div class="data">data-4</div></div>
  <div class="card"><div class="title">title-5</div><div class="data">data-5</div></div>
</div>

使用 CSS 网格交错两行或更多行

Interlave two or more rows using CSS Grid

css

css-grid

subgrid