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等的完整解决方案，还是应该明确重置？

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

标签： htmlcsscss-grid

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-rowsandgrid-template-columns属性