CSS网格中的中心行[重复]答案

【问题标题】：Center row in CSS Grids [duplicate]CSS网格中的中心行[重复]
【发布时间】：2019-05-14 15:34:08
【问题描述】：

我正在创建一个 4x3 网格布局，并希望第二行居中，因为第一行有四个元素。

类似这样的：

演示代码：

.grid-container {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 50% 50%;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<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 class="grid-item">6</div>  
  <div class="grid-item">7</div>
</div>

【问题讨论】：

基本上，你不能作为 4 列网格......你所拥有的 不是网格。我会使用 flexbox 或者尝试调整 8(?) 列网格。

标签： html css css-grid

【解决方案1】：

flex 很容易做到这一点

居中使用justify-content: center; 设置宽度使用flex: 0 0 cala(20% - 40px);:

.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  font-size: 30px;
  text-align: center;
  flex: 0 0 calc(20% - 40px);
padding: 20px;
margin: 5px;
}

<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 class="grid-item">6</div>  
  <div class="grid-item">7</div>
</div>

【讨论】：

【解决方案2】：

EIGHT 列网格实际上就是您所追求的。

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: 50% 50%;
  padding: 10px;
  grid-gap: 4px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  grid-column: span 2
}

.grid-item:nth-child(5) {
  grid-column: 2 / span 2;
}

<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 class="grid-item">6</div>
  <div class="grid-item">7</div>
</div>

【讨论】：