如何使用网格创建响应式三列布局，并在特定断点上将第三列跨越两行？

Question

我有一个三列布局，使用 CSS Grid 和

minmax()

使其响应。

在视口一定宽度的某些断点处，第三列下推到下一行

所以我想改变这个布局，让第三列在断点发生时跨越两行。

我试过使用媒体查询来实现这个 我不得不使用开发工具手动确定断点范围。 当我改变

minmax()

值时，断点范围也改变了，再次打破布局。

 <div class="features ">
            <div class="f-card">
                    ....
            </div>
            <div class="f-card">
                    ....
            </div>
            <div class="f-card span">
                    ....
            </div>
        </div>

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: var(--main-gap);
}

@media screen and (min-width:737px) and (max-width: 1102px)  {
    .f-card.span{
        grid-column: span 2;
    }
}

这行得通，但问题是我不知道确切的断点范围，当我改变

minmax()

值时，断点范围也会改变，破坏布局。

Answer 1

我建议你的网格基于 12 列，如果你以后想添加不同的布局会更容易。

您的专栏有 3 个状态：

• 小屏幕时的全宽 -> 1 col
• 一半在中等屏幕上 -> 2 cols
• 1/3 在大屏幕上 -> 3 列

首先定义col为full(12 cols) 在中间休息时，可能有 2 种状态：一半或全部 大休息时，1/3

*末尾的颜色仅用于可视化

.features {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto;
  gap: 10px;
}

.c1 {
  grid-column: auto / span 12;
}

@media screen and (min-width:560px) {}

@media screen and (min-width:737px) {
  .c1-2-md {
    grid-column: auto / span 6;
  }
  .c1-md {
    grid-column: auto / span 12;
  }
}

@media screen and (min-width: 1102px) {
  .c1-3-lg {
    grid-column: auto / span 4;
  }
}

.features>div:first-child {
  background-color: #0a79b3;
}

.features>div:nth-child(2) {
  background-color: #00FF00;
}

.features>div:last-child {
  background-color: #7D572B;
}

<div class="features ">
  <div class="f-card c1 c1-2-md c1-3-lg">
    ....
  </div>
  <div class="f-card c1 c1-2-md c1-3-lg">
    ....
  </div>
  <div class="f-card c1 c1-md c1-3-lg">
    ....
  </div>
</div>