使用 CSS 网格创建表格

Question

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

我想要达到的目标：

该表有效： https ://codepen.io/anon/pen/baExYw

但我想将每一行包装在 div 中，这毫不奇怪地打破了表格。

这张表坏了： https ://codepen.io/anon/pen/qpbMgG

应用程序.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>

应用程序.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 还是很陌生，所以我仍然无法理解这些东西的一半是如何在幕后工作的。

任何帮助表示赞赏。提前致谢。

原文由 realph 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

display: contents 是你所需要的。

contents

这些元素本身不会生成特定的框。它们被它们的伪盒子和它们的子盒子所取代。

添加此 CSS（ 示例）：

 .row {
    display: contents;
}

更多链接：

• 准备好“显示：内容；”
• 浏览器支持表

原文由 Matveev Dmitriy 发布，翻译遵循 CC BY-SA 4.0 许可协议