如何响应式地将 CSS 网格模板列转换为行

Question

我正在尝试使用 CSS 网格在桌面上显示 3 列布局，在移动设备上显示单列布局。

但是，当我尝试以下操作时，3 列布局仍然存在，且视口小于 650 像素。

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

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

如何使用 CSS 网格在 3 列宽布局与单列堆叠布局之间进行响应式转换？

Answer 1

您可以使用repeat()此功能，只需将列设置为媒体查询的一帧即可。

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

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