时间戳

首页 > 解决方案 > 每一行都包裹在自己的容器 div 中时，是否可以使用 CSS 网格？

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

问题描述

我目前有一个带有主容器（即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>

标签： csscss-gridcss-tables

解决方案

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

推荐阅读