CSS网格 - 将两行与不同的列数对齐答案

【问题标题】：CSS grid - align two rows with different number of columnsCSS网格 - 将两行与不同的列数对齐
【发布时间】：2020-09-04 22:53:53
【问题描述】：

我有一个关于 CSS 网格的问题。假设我有 2 行：

第一行：

<div class="first-row">

  <div>
    Col 1
  </div>

  <div>
    Col 2
  </div>

  <div>
    Col 3
  </div>

  <div>
    Col 4
  </div>

</div>

第二行：

<div class="second-row">

  <div>
    <span>Under Col 1</span>
  </div>

  <div>
    <span>Under Col 2</span>
  </div>

  <div class"SPLIT-THIS">
    <span>Under Col 3</span>
    <span>Under Col 4</span>
  </div>

</div>

如何拆分第二行中的最后一个 div 元素，以便第一行的内容与第二行的内容完全对齐（就像它们在结构上是相同的行一样）。

我使用的CCS：

.first-row {
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 20px;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.second-row {
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 20px;
   align-items: center;
   justify-content: center;
   text-align: center;
}

【问题讨论】：

标签： css flexbox css-grid

【解决方案1】：

第一个选项/方法：两个容器都需要具有相同数量的列和相同的大小才能在视觉上匹配。

然后拆分元素需要跨越 2 列，并且本身就是一个网格容器。

.first-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.second-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.SPLIT-THIS {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

div,
.SPLIT-THIS span {
  box-shadow: inset 0 0 0 1px
}

<div class="first-row">

  <div>
    Col 1
  </div>

  <div>
    Col 2
  </div>

  <div>
    Col 3
  </div>

  <div>
    Col 4
  </div>

</div>

<div class="second-row">

  <div>
    <span>Under Col 1</span>
  </div>

  <div>
    <span>Under Col 2</span>
  </div>

  <div class="SPLIT-THIS">
    <span>Under Col 3</span>
    <span>Under Col </span>
  </div>

</div>

如果您只希望 3 列，其他选项是重新定义网格列模板

.first-row {
  display:grid;
   grid-template-columns: repeat(4, 1fr);
   align-items: center;
   justify-content: center;
   text-align: center;
}

.second-row {
  display:grid;
   grid-template-columns: 1fr 1fr 2fr ;
   align-items: center;
   justify-content: center;
   text-align: center;
}
.SPLIT-THIS{
   display:grid;
  grid-template-columns:repeat(2,1fr);
}
div, .SPLIT-THIS span {box-shadow:inset 0 0 0 1px}

<div class="first-row">

  <div>
    Col 1
  </div>

  <div>
    Col 2
  </div>

  <div>
    Col 3
  </div>

  <div>
    Col 4
  </div>

</div>

<div class="second-row">

  <div>
    <span>Under Col 1</span>
  </div>

  <div>
    <span>Under Col 2</span>
  </div>

  <div class="SPLIT-THIS">
    <span>Under Col 3</span>
    <span>Under Col </span>
  </div>

</div>

【讨论】：

【解决方案2】：

我会实现所谓的“子网格”或“网格级别 2”。

虽然包含两个初始行的容器在 CSS 中使用“display:grid;”定义，但使用单独的“display:grid;”定义你的“SPLIT-THIS”。然后，使用 'grid-template-rows: 50%, 50%;'对于“SPLIT-THIS”也是如此。

【讨论】：