每一行都包裹在自己的容器 div 中时，是否可以使用 CSS 网格？答案

【问题标题】：Can CSS grid be used when each row is wrapped in its own container div?每一行都包裹在自己的容器 div 中时，是否可以使用 CSS 网格？
【发布时间】：2020-07-20 13:41:39
【问题描述】：

我目前有一个带有主容器的简单表（即display: table）。在那个容器中我有一些行（即display: table-row），然后有一些div（即display: table-cell）。

.table {
  display: table;
  margin-bottom: 50px;
}

.table .table-row {
  display: table-row;
}

.table .table-row div {
  display: table-cell;
  padding: 10px;
  border: 1px red solid;
}

<div class="table">
  <div class="table-row">
    <div>Name</div>
    <div>Phone</div>
    <div>E-mail</div>
    <div>City</div>
    <div>Last meal</div>
    <div>Number of meals</div>
  </div>
  <div class="table-row">
    <div>John Doe</div>
    <div>12 34 56 78 910</div>
    <div>mail @mail.com</div>
    <div>Moscow</div>
    <div>1. June 2020</div>
    <div>13</div>
  </div>
  <div class="table-row">
    <div>Roger John Doe</div>
    <div>12 34 56 78 910</div>
    <div>myothermail @myothermail.com</div>
    <div>New York</div>
    <div>1. September 2020</div>
    <div>102</div>
  </div>
  <div class="table-row">
    <div>Roger Rabbit John Doe</div>
    <div>12 34 56 78 910</div>
    <div>mymail @mymail.com</div>
    <div>London</div>
    <div>1. May 2020</div>
    <div>55</div>
  </div>
</div>

是否可以使用 CSS 网格来实现相同的布局，而不删除包裹每行内容的 div？

我尝试在每一行上定义一个网格。在这种情况下，如果缩小窗口，单元格就会开始折叠，并且不再与下面的单元格对齐。

.row-header,
.row {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  font-size: 13px;
  justify-content: start;
}

.row-header div,
.row div {
  padding: 10px;
  border: 1px red solid;
}

<div class="row-header">
  <div>Name</div>
  <div>Phone</div>
  <div>E-mail</div>
  <div>City</div>
  <div>Last meal</div>
  <div>Number of meals</div>
</div>
<div class="row">
  <div>John Doe</div>
  <div>12 34 56 78 910</div>
  <div>mail @mail.com</div>
  <div>Moscow</div>
  <div>1. June 2020</div>
  <div>13</div>
</div>
<div class="row">
  <div>Roger John Doe</div>
  <div>12 34 56 78 910</div>
  <div>myothermail @myothermail.com</div>
  <div>New York</div>
  <div>1. September 2020</div>
  <div>102</div>
</div>
<div class="row">
  <div>Roger Rabbit John Doe</div>
  <div>12 34 56 78 910</div>
  <div>mymail @mymail.com</div>
  <div>London</div>
  <div>1. May 2020</div>
  <div>55</div>
</div>

【问题讨论】：

是的，任何类似表格的布局都可以使用css-grid完成，但是你的问题有点含糊；我不太确定你在找什么。你说你让它“有点”工作——也许你可以发布那个半工作的代码，并准确地解释什么不是你认为它会工作的方式？
或者只是简要介绍单元格的布局方式。
我现在用小提琴更新了我的 OP，你应该可以看到问题所在。
我投票决定重新打开这个问题，因为 OP 添加了一个可验证的示例，问题的重点现在很明显。
简短的回答是：您已经为每一行定义了一个新的网格。你想要一个包含所有行的大网格。这是一个例子：jsfiddle.net/xof3hdyj -- 当这个问题重新打开时，我会发布一个完整的答案。

标签： css css-grid css-tables

【解决方案1】：

.table {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.table div {
  padding: 10px;
  border: 1px red solid;
}

.gridspan2{
  grid-column: span 2;
}

code{
  background-color: #bbb;
  padding: 3px;
}

<div class="table">
  <div>Name</div>
  <div>Phone</div>
  <div>E-mail</div>
  <div>City</div>
  <div>Last meal</div>
  <div>Number of meals</div>

  <div>John Doe</div>
  <div>12 34 56 78 910</div>
  <div>mail @mail.com</div>
  <div>Moscow</div>
  <div>1. June 2020</div>
  <div>13</div>

  <div>Roger John Doe</div>
  <div>12 34 56 78 910</div>
  <div>myothermail @myothermail.com</div>
  <div>New York</div>
  <div>1. September 2020</div>
  <div>102</div>

  <div>Roger Rabbit John Doe</div>
  <div>12 34 56 78 910</div>
  <div class="gridspan2">mymail @mymail.com (This cell has <code>grid-column: span 2</code> on it</div>
  <div>1. May 2020</div>
  <div>55</div>
</div>

这样，是的

但您不能在 CSS 网格中包含行。但是，您可以在一个单元格上定义 grid-column: span 2 以组合 2 个常规单元格。

【讨论】：

【解决方案2】：

TL；DR：还没有。

CSS 网格仅作用于它们的直接子级；每个直接子节点都是网格中的一个单元格。您可以嵌套网格，但嵌套网格的跟踪（即行和列的对齐）与其父网格的跟踪无关。

在CSS Grid Layout Module Level 1 规范中引入 CSS-grid 时就预料到了这个缺点。 subgrid 功能将解决这个缺点，并将在CSS Grid Layout Module Level 2 中引入，目前处于“工作草案”状态。

Firefox（v71 或更新版本；当前稳定版本是 v78）是目前唯一支持 CSS 子网格的浏览器。随着规范的成熟，其他人将很快跟进。

下面的代码 sn-p 演示了子网格将如何工作。这个例子现在可以在 Firefox 中使用。

此示例定义了一个具有 6 列和自动行数的网格。每一行都包含在一个容器 div 中，并且该 div 跨越父网格的所有 6 列，就像一个表格一样。子网格在列方向上定义，这意味着子网格跨越的所有父网格列都成为该子网格的列定义。

.grid {
  /* the parent grid. */
  display: grid;

  /* this grid has 6 equally sized columns. */
  grid-template-columns: repeat(6, 1fr);
}

.grid .row {
  /* a subgrid is just a nested grid whose column
   * and/or row definitions are based on its parent. */
  display: grid;

  /* this subgrid spans from the first column to the
   * last column of the parent grid. */
  grid-column: 1 / -1;

  /* this means that the subgrid's column
   * definitions are based the parent's columns
   * that we spanned.
   * this is the part that isn't well-supported
   * in browsers yet. */
  grid-template-columns: subgrid;
}

.cell {
  padding: 10px;
  border: 1px red solid;
}

<div class="grid">
  <div class="row header">
    <div class="cell">Name</div>
    <div class="cell">Phone</div>
    <div class="cell">E-mail</div>
    <div class="cell">City</div>
    <div class="cell">Last meal</div>
    <div class="cell">Number of meals</div>
  </div>
  <div class="row">
    <div class="cell">John Doe</div>
    <div class="cell">12 34 56 78 910</div>
    <div class="cell">mail @mail.com</div>
    <div class="cell">Moscow</div>
    <div class="cell">1. June 2020</div>
    <div class="cell">13</div>
  </div>
  <div class="row">
    <div class="cell">Roger John Doe</div>
    <div class="cell">12 34 56 78 910</div>
    <div class="cell">myothermail @myothermail.com</div>
    <div class="cell">New York</div>
    <div class="cell">1. September 2020</div>
    <div class="cell">102</div>
  </div>
  <div class="row">
    <div class="cell">Roger Rabbit John Doe</div>
    <div class="cell">12 34 56 78 910</div>
    <div class="cell">mymail @mymail.com</div>
    <div class="cell">London</div>
    <div class="cell">1. May 2020</div>
    <div class="cell">55</div>
  </div>
</div>

目前，如果您需要将单元格嵌套在标记中，CSS 表格是完成网格/表格布局的最佳方式。

【讨论】：