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

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演示

规格参考：

• 第7.2节。明确的轨道尺寸：grid-template-rows和grid-template-columns属性