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

问题描述 投票：0回答：2

我目前有一个带有主容器的简单桌子（即

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 css-grid css-tables
2个回答
4
投票

2024 编辑：CSS 子网格现在在所有主要浏览器中都得到良好的支持。下面的答案保留原样。

TL;DR：还没有。

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

在 CSS 网格布局模块级别 1 规范中引入 CSS-grid 时，就预料到了这个缺点。 

subgrid
功能将解决这个缺点，并将在CSS网格布局模块级别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 表格是完成网格/表格布局的最佳方式。

0
投票

.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 个常规单元格。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.