将两个不同网格的列排列成一行

Question

如何在不调整 HTML 的情况下使两个网格单元格“右”和“列”在彼此下方的一行中？没有间隙这不是问题，但一旦添加间隙，列就不再对齐。

*, *::before, *::after {
  box-sizing: border-box;
}

.OuterContainer {
  display: grid;
  column-gap: 32px;
  grid-template-columns: 1fr 3fr;
}

.Col4Grid {
    display: grid;
    column-gap: 32px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}


.Col {
  background-color: #e7e7e7;
}

<div class="OuterContainer">
  <div class="Col">
    left
  </div>
  <div class="Col">
    right
  </div>
</div>

<div class="Col4Grid">
  <div class="Col">col</div>
  <div class="Col">col</div>
  <div class="Col">col</div>
  <div class="Col">col</div>
</div>

Answer 1

希望我的布局正确无误。只需对两个容器应用相同的 grid-column 规则。然后让列（右）跨越 3 列：grid-column: span 3;

*, *::before, *::after {
  box-sizing: border-box;
}

.OuterContainer,
.Col4Grid {
  display: grid;
  column-gap: 32px;
  grid-template-columns: repeat(4, 1fr);
}

.Col {
  background-color: #e7e7e7;
}

.OuterContainer .Col:nth-child(2) {
  grid-column: span 3;
}

<div class="OuterContainer">
  <div class="Col">
    left
  </div>
  <div class="Col">
    right
  </div>
</div>

<div class="Col4Grid">
  <div class="Col">col</div>
  <div class="Col">col</div>
  <div class="Col">col</div>
  <div class="Col">col</div>
</div>

Answer 2

另一个更“脏数学”的结果。只需将变量更改为您需要的任何大小即可。

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
 --g-gap: 40px;
}

.OuterContainer {
  display: grid;
  column-gap: var(--g-gap);
  grid-template-columns: 1fr 3fr;
}

.Col4Grid {
  display: grid;
  column-gap: var(--g-gap);
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.Col {
  background-color: #e7e7e7;
}

.Col4Grid .Col:first-child {
width: calc(100% + 1/2*var(--g-gap));
}

.Col4Grid .Col:not(:first-child) {
margin-left: calc(1/2*var(--g-gap));
}

<div class="OuterContainer">
  <div class="Col">
    left
  </div>
  <div class="Col">
    right
  </div>
</div>

<div class="Col4Grid">
  <div class="Col">col</div>
  <div class="Col">col</div>
  <div class="Col">col</div>
  <div class="Col">col</div>
</div>

这当然不是响应式的（如果你打算使用 100+px）并且绝对不是解决这个问题的好方法，但我认为这是一种有趣的调整方式！

将两个不同网格的列排列成一行

Arrange columns of two different grids with gaps in line

html

css

css-grid