如何创建具有列跨度和元素间距的 flexbox 网格

Question

我正在尝试创建一个应该看起来像这样的 flexbox 网格

基本的网格布局很容易创建，但我很难添加元素之间的间距。正如您在代码片段中看到的，第二行中的间距不正确。

#flexContainer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 200px;
  width: 600px;
}

.rowContainer {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.thirdElement {
  flex-grow: 1;
  height: 40px;
  background-color: red;
}

.twoThirdsElement {
  flex-grow: 2;
  height: 40px;
  background-color: red;
}

<div id="flexContainer">
  <div class="rowContainer">
    <div class="thirdElement">
    </div>
    <div class="thirdElement">
    </div>
    <div class="thirdElement">
    </div>
  </div>
  <div class="rowContainer">
    <div class="twoThirdsElement">
    </div>
    <div class="thirdElement">
    </div>
  </div>
</div>

Answer 1

使用CSS网格

#flexContainer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rowContainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.thirdElement {
  height: 40px;
  background-color: red;
}

.twoThirdsElement {
  grid-column:span 2;
  height: 40px;
  background-color: red;
}

<div id="flexContainer">
  <div class="rowContainer">
    <div class="thirdElement">
    </div>
    <div class="thirdElement">
    </div>
    <div class="thirdElement">
    </div>
  </div>
  <div class="rowContainer">
    <div class="twoThirdsElement">
    </div>
    <div class="thirdElement">
    </div>
  </div>
</div>

Answer 2

在我看来，这就像一个三列网格，其中第四项跨越两列。

这是一个简化版本。显然，您需要根据需要设置项目的样式。

#flexContainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  height: 200px;
  width: 600px;
}

#flexContainer>* {
  background-color: red;
}

.twoThirdsElement {
  grid-column: auto / span 2;
}

<div id="flexContainer">
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div class="twoThirdsElement">
  </div>
  <div>
  </div>
</div>

Answer 3

您不需要 <div class="rowContainer">。它只用一个 flex 属性修复 #flexContainer.

#flexContainer {
  display: flex;
  flex-wrap: wrap;
  height: calc(80px + (600px / 20)); /* (600px/20) == 5% of 600px. result = 80px + 5%(600px). it is for a gap between rows that is equal with gap: 5%; for columns.*/
  align-content: space-between;
  gap: 5%;
  width: 600px;
}

.thirdElement {
  flex-basis: 30%;
  height: 40px;
  background-color: red;
}

.twoThirdsElement {
  flex-basis: 65%;
  height: 40px;
  background-color: red;
}

<div id="flexContainer">
    <div class="thirdElement">
    </div>
    <div class="thirdElement">
    </div>
    <div class="thirdElement">
    </div>
    <div class="twoThirdsElement">
    </div>
    <div class="thirdElement">
    </div>
</div>

如何创建具有列跨度和元素间距的 flexbox 网格

How to create a flexbox grid with a column span and spacing between elements

html

css

flexbox