css - 如何使用 CSS 网格创建两列网格？

Question

我正在尝试创建一个相当简单的布局，并且我想避免使用 float 。我的简化 HTML 如下，所以现在我正在尝试创建一个两列布局，其中我希望左侧有元素 B，右侧有元素 A、C 和 D(彼此下方)。我尝试使用的代码是:

.container {
  display: grid;
  grid-template-areas: 'left right';
}

.item-b {
  grid-area: left;
}

.item:not(.item-b) {
  grid-area: right;
}

<div class="container">
  <div class="item item-a">A</div>
  <div class="item item-b">B</div>
  <div class="item item-c">C</div>
  <div class="item item-d">D</div>
</div>

但是在这里，右边的元素被放置在彼此之上。有没有办法把它们放在彼此下面？这是一个具有相同代码的 fiddle :https://jsfiddle.net/b85h7g03/

此外，当您查看 fiddle 时，为什么元素不再是容器的 50%？

(顺便说一下，我没有在我的 HTML 中将元素 B 放在元素 A 上方的原因是因为在移动设备上，元素 B 需要在元素 A 下方)

编辑:我刚刚更新了我的 fiddle :https://jsfiddle.net/b85h7g03/2/我忘了提到 B 项的高度是灵活的，可以变得很长。供引用:这是我想要的布局，但没有 float :https://jsfiddle.net/hLx3709v/

Answer 1

在这里你可以使用 flex

<div class="container">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

CSS

* {
  box-sizing: border-box;
}
body, html {
  margin: 0;
  padding: 0;
}
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.children {
  width: calc(50% - 10px);
  margin: 5px;
  background: #D8D8D8;
  flex: 1;
}
.children:first-child {
  flex: 0 0 calc(100% - 10px);
  border: 2px solid #44C0FF;
}