时间戳

首页 > 解决方案 > 构建具有重复行和稀疏标题的 CSS 网格布局

html - 构建具有重复行和稀疏标题的 CSS 网格布局

问题描述

我正在尝试使用 CSS 网格进行布局，但无法弄清楚如何做到这一点。这是布局的草图：

(empty)   | (empty)   | label     | (empty)
---------------------------------------------
col1      | col2      | col3      | col4

我遇到的问题是我想根据需要重复第二行多次。

理想情况下，我还希望能够将子元素放入网格容器中，并让它们流入正确的位置，而无需指定grid-area它们。

也就是说，理想情况下，我可以使用以下标记生成此布局：

<div class="grid-container">
  <div>label</div>
  <div>col1</div>
  <div>col2</div>
  <div>col3</div>
  <div>col4</div>
</div>

我已经看了一个小时左右的网格文档，似乎无法理解如何做到这一点。有小费吗？

标签： htmlcsscss-grid

解决方案

  1. grid-area: 1 / 3 / 2 / 4;用于我们的div .label。不得不为其添加一个类。1 / 3 / 2 / 4表示grid-row-start / grid-column-start / grid-row-end / grid-column-end。基本上我们把.label它放在第一行的第三列。更多信息在这里https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area
  2. 我们虽然可以::before使用grid-area: 1 / 1 / 2 / 5;. 像第一个元素一样grid对待。::before
  3. 用于将z-index一个元素设置在另一个元素之上。z-index以某种特定的方式为grid儿童工作。更多在这里https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout（重叠内容的控制）

grid-area如您所见，其他子元素无需特定设置即可工作。

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(20px, auto);
  grid-column-gap: 1px;
  grid-row-gap: 1px;
}

.grid-container::before {
  content: '';
  grid-area: 1 / 1 / 2 / 5;
  z-index: 1; 
  background: cyan;
}
.grid-container .label {
  grid-area: 1 / 3 / 2 / 4;
  z-index: 2;
}
<div class="grid-container">
  <div class="label">label</div>
  <div>col1</div>
  <div>col2</div>
  <div>col3</div>
  <div>col4</div>
  <div>col1</div>
  <div>col2</div>
  <div>col3</div>
  <div>col4</div>
</div>

推荐阅读