html - 在 CSS 网格中进行多次拆分

Question

我想知道是否可以使用 CSS 网格在列中进行中间拆分，这可行吗？下面是一个图形示例。非常感谢。

编辑：我正在使用显示：网格，我想要实现的是响应式的，它将每个单元格放在移动设备上。

标签： htmlcss

Answer 1

我刚刚创建了您需要的示例，但尝试确保您分配正确的名称（而不是 col-x 或 row-y），例如navigation或sidebar。

我建议将行数增加一倍，并为左列分配两次行数。grid-template-areas尤其是在.gridCSS中看看。

要更改网格在较小设备上的显示方式，您可以@media在 .grid 类上应用查询来调整grid-*属性。

下面的这个示例不是最短也不是最聪明的解决方案，但我猜它是最直观的。

.grid {
  height: 200px;
  display: grid;
  grid-template-columns: 80% auto;
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas: 
    "col-1-row-1 col-2-row-1-1"
    "col-1-row-1 col-2-row-1-2"
    "col-1-row-2 col-2-row-2-1"
    "col-1-row-2 col-2-row-2-2"
    "col-1-row-3 col-2-row-3-1"
    "col-1-row-3 col-2-row-3-2"
}

.col-1-row-1,
.col-1-row-2,
.col-1-row-3,
.col-2-row-1-1,
.col-2-row-1-2,
.col-2-row-2-1,
.col-2-row-2-2,
.col-2-row-3-1,
.col-2-row-3-2 {
    justify-self: center;
    align-self: center;
}

.col-1-row-1 {
  grid-area: col-1-row-1;
}
.col-1-row-2 {
  grid-area: col-1-row-2;
}
.col-1-row-3 {
  grid-area: col-1-row-3;
}
.col-2-row-1-1 {
  grid-area: col-2-row-1-1;
}
.col-2-row-1-2 {
  grid-area: col-2-row-1-2;
}
.col-2-row-2-1 {
  grid-area: col-2-row-2-1;
}
.col-2-row-2-2 {
  grid-area: col-2-row-2-2;
}
.col-2-row-3-1 {
  grid-area: col-2-row-3-1;
}
.col-2-row-3-2 {
  grid-area: col-2-row-3-2;
}

<div class="grid">
    <div class="col-1-row-1">Col 1 Row 1</div>
    <div class="col-1-row-2">Col 1 Row 2</div>
    <div class="col-1-row-3">Col 1 Row 3</div>
    <div class="col-2-row-1-1">Col 2 Row 1.1</div>
    <div class="col-2-row-1-2">Col 2 Row 1.2</div>
    <div class="col-2-row-2-1">Col 2 Row 2.1</div>
    <div class="col-2-row-2-2">Col 2 Row 2.2</div>
    <div class="col-2-row-3-1">Col 2 Row 3.1</div>
    <div class="col-2-row-3-2">Col 2 Row 3.2</div>
</div>