Question

我在CSS网格中有两列布局，并且希望切换到1024px的单列布局。

.page {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  grid-column-gap: 5pt;
  grid-row-gap: 5pt;
}

@media (max-width: 1024px){
  .page{
    display: block;
  }
}

更改显示类型是否是禁用grid-template-rows等的完整解决方案，还是应该明确重置？

使用网格设置显示类型时是否有任何“陷阱”。

Answer 1

grid-template-columns和grid-template-rows的初始值为none。

因此，要重置属性（表示未创建任何明确的曲目），请在媒体查询中切换为grid-template-columns: none。

您也可以切换到grid-template-columns: 1fr，这将创建一个带有一个显式列的网格。

article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px;
  grid-column-gap: 5pt;
  grid-row-gap: 5pt;
}

section {
  background-color: green;
}

@media (max-width: 600px) {
  article {
    grid-template-columns: 1fr;
    /* OR, change value to 'none' */
  }
  section {
    background-color: orangered;
  }
}

<article>
  <section></section>
  <section></section>
</article>

jsFiddle demo

规格参考：

§ 7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties

Answer 2

将任何CSS属性重置为其初始值的最简单方法是使用initial值。它可以在任何属性上运行，而您不必担心任何属性默认值。

.page {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  grid-column-gap: 5pt;
  grid-row-gap: 5pt;
}

.item {
  height: 100px;
  background-color: green;
}

@media (max-width: 1024px) {
  .page {
    grid-template-columns: initial;
  }
}

<div class="page">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

但是在当前情况下，1fr和none当然也可以工作。

如何正确重置网格模板列？

2 个答案:

jsFiddle demo