css - 当每一行都包裹在自己的容器 div 中时，可以使用 CSS 网格吗？

Question

我目前有一个带有主容器的简单表格(即 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>

Answer 1

TL;DR:还没有。

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

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

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

下面的代码片段演示了子网格将 的工作方式。此示例目前在 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 表格是完成网格/表格布局的最佳方式。