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

Question

我在 CSS 网格中有一个两列布局，想切换到 1024 像素的单列布局。

.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