如何在网格中组织 <div>？答案

【问题标题】：How to organize <div>s in a grid?如何在网格中组织 <div>？
【发布时间】：2020-05-26 10:13:44
【问题描述】：

我试图在 2 列和 2 行中组织 4 个 div，但它们只显示在一列和 4 行中。我正在使用这样的网格模板区域...

  .table-products {
    display: flex, grid;
  }
  .grid {
  grid-template-areas:
    "header1   header2"
    "body1   body2";
  }
  .table-products__header1 {
  grid-area: header1;
  background: yellow;
  }
.table-products__body1 {
  grid-area: body1;
  background: green;
  }
.table-products__header2 {
  grid-area: header2;
  background: blue;
  }
.table-products__body2 {
  grid-area: body2;
  background: red;
  }
.table-products__header1, .table-products__header2, .table-products__body1, .table-products__body2 {
  width: 40%;

<div class="table-products">
<div class="table-products__header1">
header1
</div>
<div class="table-products__body1">
body1
</div>
<div class="table-products__header2">
header2
</div>
<div class="table-products__body2">
body2
</div>
</div>

我希望标题彼此相邻，而正文则位于下方。

你能帮帮我吗？谢谢！！

【问题讨论】：

感谢 Paulie_D！我刚刚更新了它，仍然没有工作。
你什么也没更新 (1) 你的显示值是错误的 (2) 你没有 .grid 类的元素

标签： html css css-grid

【解决方案1】：

只需在父级上设置display:grid...

  .table-products {
  display: grid;
  grid-template-areas: "header1   header2" "body1   body2";
}

.table-products__header1 {
  grid-area: header1;
  background: yellow;
}

.table-products__body1 {
  grid-area: body1;
  background: green;
}

.table-products__header2 {
  grid-area: header2;
  background: blue;
}

.table-products__body2 {
  grid-area: body2;
  background: red;
}

.table-products__header1,
.table-products__header2,
.table-products__body1,
.table-products__body2 {
  width: 40%;

<div class="table-products">
  <div class="table-products__header1">
    header1
  </div>
  <div class="table-products__body1">
    body1
  </div>
  <div class="table-products__header2">
    header2
  </div>
  <div class="table-products__body2">
    body2
  </div>
</div>

【讨论】：