Html 使用 CSS 网格创建表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47873687/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a Table with CSS grid
提问by realph
I'm trying to create a table using CSS grid, with equal columns based on the content. I want to avoid using <table>. This is a follow-up to this question: Auto-adjusting columns with CSS grid
我正在尝试使用 CSS 网格创建一个表格，根据内容使用相等的列。我想避免使用<table>. 这是这个问题的后续：Auto-adjusting columns with CSS grid
What I'm trying to achieve:
我正在努力实现的目标：
This table works: https://codepen.io/anon/pen/baExYw
此表有效：https: //codepen.io/anon/pen/baExYw
But I want to wrap the each row in a div, which unsurprisingly breaks the table.
但是我想将每一行都包装在 a 中div，这不出所料地打破了表格。
This table is broken: https://codepen.io/anon/pen/qpbMgG
这张表坏了：https: //codepen.io/anon/pen/qpbMgG
app.html
应用程序.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
应用程序.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%;
}
I'm still very new to CSS Grid, so I'm still having trouble understanding how half of this stuff works behind the scenes.
我对 CSS Grid 还是很陌生，所以我仍然无法理解这些东西的一半是如何在幕后工作的。
Any help is appreciated. Thanks in advance.
任何帮助表示赞赏。提前致谢。
回答by Michael Benjamin
In your first example, your data cells are children of the container. Hence, grid properties – which only work between parent and child– work as you expect.
在您的第一个示例中，您的数据单元格是容器的子项。因此，网格属性——只在父子对象之间起作用——按你的预期工作。
In your second example, you have some data cells that are children of .rowcontainers. These cells are no longer children of .wrapper, the grid container. Therefore, these cells are outside the scope of grid layout, do not recognize grid properties and are rendered as standard block-level elements.
在您的第二个示例中，您有一些作为.row容器子项的数据单元格。这些单元格不再.wrapper是网格容器 的子元素。因此，这些单元格在网格布局的范围之外，无法识别网格属性并呈现为标准的块级元素。
So, basically, grid containers with different child elements render different layouts.
因此，基本上，具有不同子元素的网格容器呈现不同的布局。
One solution to get your examples to match would be to make the grid items into grid containers having the same properties as the parent. Here's the general idea:
使您的示例匹配的一种解决方案是将网格项放入与父项具有相同属性的网格容器中。这是一般的想法：
Revised Codepen
修订代码笔
.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%;
}<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>回答by Matveev Dmitriy
display: contentsis what you need.
display: contents是你所需要的。
contentsThese elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.
contents这些元素本身不会产生特定的盒子。它们被它们的伪盒子和它们的子盒子所取代。
Add this CSS (example):
添加此 CSS（示例）：
.row {
display: contents;
}
More links:
更多链接：
回答by Francis Schiavo
It didn't break, it works exactly as intended. Every child element is using one cell of the grid, if you wrap your header in another div you'll see they swap rows for columns, because each group will use one cell.
它没有损坏，它完全按预期工作。每个子元素都使用网格的一个单元格，如果您将标题包装在另一个 div 中，您会看到它们将行交换为列，因为每个组将使用一个单元格。
If you are going to display tabular data, then you should stick with tables as they are the semantically correct element for that purpose.
如果您要显示表格数据，那么您应该坚持使用表格，因为它们是用于该目的的语义正确的元素。
However if you are trying to build responsive designs or you really want to use grid I suggest you to read thisincredible article about CSS grids.
但是，如果您正在尝试构建响应式设计，或者您真的想使用网格，我建议您阅读这篇关于 CSS 网格的精彩文章。
Take a look in display: subgrid;maybe it is what you are looking for in this scenario.
看一看，display: subgrid;也许这就是您在这种情况下要寻找的。
