网格布局内的中心列[重复]

Question

我已经开始学习网格系统（display:grid）并且我有以下代码，但我不知道如何在不在 grid-template-columns 中添加更多列的情况下将最后两列（4 和 5）居中并在列中使用 grid-column-start 和 grid-column-end 。可以吗？：

HTML：

<div class="grid-container">
  <div class="grid-item">
      1
    </div>
    <div class="grid-item">
        2
    </div>
    <div class="grid-item">
        3
    </div>
    <div class="grid-item">
        4
    </div>
    <div class="grid-item">
        5
    </div>
</div>

CSS：

body {
    margin: 0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

.grid-item {
    padding: 10px;
    background: skyblue;
}

JSFiddle：https://jsfiddle.net/3b5Lxujh/

我有什么：

我想要什么：

Answer 1

如果您使用 CSS 网格，则应该添加列 - 为此使用 6 列网格，使用 grid-template-columns: repeat(6, 1fr) 每个项目跨越两个网格列 - 和 放置 使用grid-column 规则将最后一行移到中心 - 请参见下面的演示：

body {
  margin: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 20px;
}

.grid-item {
  padding: 10px;
  background: skyblue;
  grid-column: span 2;
}

.grid-item:nth-last-child(2) {
  grid-column: 2 / 4;
}

.grid-item:last-child {
  grid-column: 4 / 6;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>

---

弹性盒解决方案

对于这种布局 flexbox 更适合 - 通常我会使用使用 flex-basis 的 flexbox（使用 calc 创建 网格间隙）像这样：

body {
  margin: 0;
}

.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.grid-item {
  padding: 10px;
  background: skyblue;
  margin: 10px;
  flex-basis: calc(33.33% - 40px);
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>