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

【问题标题】：How to properly reset grid-template-columns?如何正确重置网格模板列？
【发布时间】：2019-06-17 16:20:06
【问题描述】：

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

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

【问题讨论】：

而不是设置display: block，您可以使用grid-template-columns: auto 进行1 列布局，从而不会丢失div 之间的间隙 - 请参阅jsfiddle.net/0q7h25dw

标签： html css css-grid

【解决方案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

【讨论】：

@Adrift，自从 2017 年的 modern browsers implemented Grid 以来，我几乎一直使用 Grid 进行网站布局。 Grid 可以轻松完成许多 flexbox 难以完成的事情。对于更小更简单的布局项目，我倾向于坚持使用 flexbox。也就是说，有各种flexbox advantages over grid worth noting。
浏览器支持非常精彩！是时候了。感谢您的反馈，我现在要阅读答案:)
太棒了。感谢您对@Michael_B 的如此彻底的回答！！
根据我的经验，结合网格和弹性布局可以带来很好的优化。我发现将 Grid 用于较大的布局并使用 flex 用于嵌套元素是有用且高效的。这是我写过的一个用例：Centering in CSS Grid。 @漂泊
@Michael_B：感谢您的快速回复和出色的回答！非常有趣的东西。这两个模块的强大令人难以置信。今晚晚些时候将在工作中详细阅读您的答案和规范。处理 Magento 2 让人头疼，因此为什么我会拖延关于酷 CSS3 的东西：p

【解决方案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 当然也可以。

【讨论】：

【解决方案3】：

也可以考虑使用unset：

grid-template-columns: unset;

如果属性从其父级自然继承，则将属性重置为其继承值，如果不是，则重置为其初始值。

所以：

.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 {
    /* Here: */
    grid-template-columns: unset;
  }
}

【讨论】：