Question

我正在尝试创建一个相当简单的布局，并且我想避免使用浮点数。我的简化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>

但是在这里，右边的项目被放置在彼此的顶部。有什么办法可以将它们放置在彼此下面吗？这是一个带有相同代码的小提琴：https://jsfiddle.net/b85h7g03/

另外，当您看小提琴时，为什么这些物品不再是容器的50％了？

（顺便说一句，我之所以不在HTML中将项目B置于项目A上方是因为在移动项目B中，项目B必须位于项目A之下）

编辑：我刚刚更新了小提琴：https://jsfiddle.net/b85h7g03/2/我忘了提到项目B的高度灵活，可以变长。供参考：这是我想要的布局，但没有浮点数：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;
}

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

1 个答案: