Question

我正在尝试使用CSS Grid在台式机上显示3列布局，在移动设备上显示单列布局。

但是，当我尝试以下操作时，3列布局仍然会保留且视口小于650px。

.page {
  display: grid;
  grid-template-columns: 33% 34% 33%
}

@media (max-width: 650px) {
  .page {
    grid-template-columns: 100%;
  }
}

如何使用CSS Grid响应地从3列宽的布局过渡到单列堆叠的布局？

Answer 1

您可以使用repeat()并将媒体查询的列设置为一帧。

.page {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 650px) {
  .page {
    grid-template-columns: 1fr;
  }
}

Answer 2

您可以添加一个grid-template-area属性，如下所示：

.page {
  display: grid;
  grid-template-area: "a b c";
  grid-template-columns: 33% 34% 33%
}

@media (max-width: 650px) {
  .page {
    grid-template-columns: 100%;
    grid-template-area: 
      "a"
      "b"
      "c";
  }
}

其中字符串分隔符表示新行。

如何将CSS网格模板列转换为行

2 个答案: