html - 如何将半div与css网格对齐？

Question

我有四个 div。如何将第二个和第三个对齐到一行？ (各 50%)

我尝试执行以下操作:

.wrap { display:grid; grid-template-columns:1fr; grid-template-rows:1fr "auto auto" 1fr; }

.wrap > div {border:1px solid; background:#4472C4;}

<div class="wrap">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</div>

但是chrome不应用这种风格。也许我做错了。我该如何修复它？

Answer 1

grid-template-rows:1fr "auto auto" 1fr;

这是废话。 grid-template-rows 为每行中每列的大小提供模板。

它没有一一描述每一行。

“auto auto” 不是有效的大小。

---

创建一个 2x3 网格，然后使第一个和最后一个元素跨越其中的多个单元格。

div {
  border: solid #aaa 1px
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "Top Top" "Left Right" "Bottom Bottom";
}

.Top {
  grid-area: Top;
}

.Left {
  grid-area: Left;
}

.Right {
  grid-area: Right;
}

.Bottom {
  grid-area: Bottom;
}

<div class="grid-container">
  <div class="Top">Top</div>
  <div class="Left">Left</div>
  <div class="Right">Right</div>
  <div class="Bottom">Bottom</div>
</div>