4 栏布局 中心第三栏

Question

我想要 HTML 中的页脚有 4 列布局，徽标（第三列）以页脚为中心。因此，基本上前两列位于徽标左侧，徽标居中，第四列位于徽标右侧。我知道如何使用 3 列布局来实现此目的，但我想知道是否有更简单的方法使用 Flex 或网格和 4 列布局来实现它。

编辑：我只是想这样做，仍然想知道是否有更好的方法？

<div class="container">
  <div class="column">First Column</div>
  <div class="column">Second Column</div>
  <div class="center-column">Centered Column</div>
  <div class="column">Fourth Column</div>
</div>

.container {
  display: grid;
  justify-content: space-between;
  grid-template-columns: .5fr .5fr 1fr 1fr;
  justify-items: center;
}

Answer 1

使用嵌套网格。外部网格有三列，其中第一列包含一个嵌套的内部网格，该内部网格有两列。

footer, .column-pair {
  display: grid;
  gap: 5px;
}

footer {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  text-align: center;
}

.column-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.column {
  padding: 3em 0;
}

.c1 {
  background: orange;
}

.c2 {
  background: pink;
}

.c3 {
  background: lime;
}

.c4 {
  background: cyan;
}

<footer>
  <div class="column-pair">
    <div class="column c1">First Column</div>
    <div class="column c2">Second Column</div>
  </div>
  <div class="column c3">Centered Column</div>
  <div class="column c4">Fourth Column</div>
</footer>