CSS网格中的中心溢出单元格[重复]答案

【问题标题】：Center overflowing cell in CSS grid [duplicate]CSS网格中的中心溢出单元格[重复]
【发布时间】：2020-04-17 22:51:54
【问题描述】：

网格容器中有 3 个项目。我想将第三个 div 居中，因为前两个 divs 占据了 50% 的空间。

#gridContainer{
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
grid-gap: 1%;
}

<div id="gridContainer">
  <div >1</div>
  <div>2</div>
  <div>3 - center in next row</div>
</div>

【问题讨论】：

标签： html css css-grid

【解决方案1】：

根据CSS Grid Layout中Box对齐的docs，可以使用grid-template-areas。

#gridContainer{
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-auto-rows: 50px;
     grid-gap: 1%;
     grid-template-areas: "a a b b" ". c c .";
}
#gridContainer > div{
     border:1px solid red;
}
.item1{
     grid-area: a;
}
.item2{
     grid-area: b;
}
.item3{
     grid-area: c;
}

<div id="gridContainer">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3 - center in next row</div>
      </div>

【讨论】：

【解决方案2】：

您可以使用 grid-template-areas 或按照以下代码进行操作：

#gridContainer{
  display: grid;
  grid-template-columns: repeat(4 , minmax(100px, 1fr));
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 1%;
}

#gridContainer div{
  background: #ccc;
  margin-bottom: 10px;
  text-align: center;
}

.first{
  grid-column: 1 / 3;
}

.second{
  grid-column: 3 / 6;
}

.third{
  grid-column: 2 / 4;
}

<div id="gridContainer">
  <div class="first">1</div>
  <div class="second">2</div>
  <div class="third">3 - center in next row</div>
</div>

【讨论】：

【解决方案3】：

您可以使用的工具（因为它可能更适合此任务）是flexbox。下面是简单的代码示例：

#flexContainer {
  display: flex;
  flex-wrap: wrap;
}

#flexContainer div {
  flex-grow: 1;
  flex-basis: 50%;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid white;
  background-color: #CCC;
}

<div id="flexContainer">
  <div>1</div>
  <div>2</div>
  <div>3 - center in next row</div>
</div>

我不确定这是否是您的意思。如果您不想让第三个 div 占据行的全宽，也可以：

#flexContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#flexContainer div {
  flex-basis: 50%;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid white;
  background-color: #CCC;
}

<div id="flexContainer">
  <div>1</div>
  <div>2</div>
  <div>3 - center in next row</div>
</div>

【讨论】：