Question

我尝试使用CSS网格创建一个表，根据内容使用相等的列。我想避免使用<table>。这是此问题的后续问题：Auto-adjusting columns with CSS grid

我想要实现的目标：

但是我想将每一行包裹在div中，这不足为奇地打破了表格。

此表已损坏：https://codepen.io/anon/pen/qpbMgG

app.html

<div class="wrapper">
  <div class="box a">col 1</div>
  <div class="box b">col 2</div>
  <div class="box c">col 3</div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>
</div>

app.css

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, auto);
  background-color: #fff;
  color: #444;
  max-width:  800px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

我对CSS Grid来说还是一个新手，所以我仍然无法理解这些东西中有一半是在幕后工作的。

感谢任何帮助。提前谢谢。

Answer 1

在first example中，您的数据单元格是容器的子级。因此，网格属性 - which only work between parent and child - 按预期工作。

在second example中，您有一些数据单元格是.row容器的子项。这些单元格不再是网格容器.wrapper的子元素。因此，这些单元格不在网格布局范围内，不识别网格属性，而是呈现为标准块级元素。

因此，基本上，具有不同子元素的网格容器会呈现不同的布局。

让您的示例匹配的一个解决方案是将网格项目转换为具有与父项相同属性的网格容器。这是一般的想法：

Revised Codepen

＆＃13;

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  background-color: #fff;
  color: #444;
  max-width: 800px;
}

.row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
}

div:nth-child(4) { grid-row-start: 2; }
div:nth-child(5) { grid-row-start: 3; }

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

＆＃13;

<div class="wrapper">
  <div class="box a">col 1</div>
  <div class="box b">col 2</div>
  <div class="box c">col 3</div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>
</div>

＆＃13;

Answer 2

display: contents是您所需要的。

contents

这些元素本身不会产生特定的框。他们是   取而代之的是伪框和子框。

添加此CSS（example）：

.row {
    display: contents;
}

更多链接：

Answer 3

它没有破坏，它完全符合预期。每个子元素都使用网格的一个单元格，如果您将标题包装在另一个div中，您将看到它们交换列的行，因为每个组将使用一个单元格。

如果您要显示表格数据，那么您应该坚持使用表格，因为它们是用于此目的的语义正确的元素。

但是，如果您正在尝试构建响应式设计，或者您真的想要使用网格，我建议您read this关于CSS网格的令人难以置信的文章。

看看display: subgrid;也许这就是你在这个场景中寻找的东西。

Answer 4

实际上，我们应该使用css-grid的MotorEncoder::MotorEncoder(int pin1, int pin2) { this->pin1 = pin1; this->pin2 = pin2; this->encoder = new ::Encoder(pin1, pin2); } void MotorEncoder::init() { } int MotorEncoder::read() { return encoder->read(); }属性来使用css网格创建类似表格的布局

注意：由于auto-fit，我们不需要指定列数

auto-fit

使用CSS网格创建表

4 个答案:

Revised Codepen