Html 如何使我的网格模板移动友好？

对，我的网站有一个网格模板，在桌面版上有两列。由于这是缩小到一个移动版本，我想这是一列，填补了整个设备的宽度

我该怎么做呢

下面是代码

谢谢

.grid{
显示：网格；
网格模板列：重复（2，1fr）；
/*网格模板行：重复（6，1fr）*/
网格模板行：自动；
网格模板区域：
“标题内容上限”
“标题内容较低”；
栅隙：20px；
}
.头衔{
网格区域：标题；
}
.内容上限{
网格区域：内容；
}
.内容较低{
网格区域：内容；
边框样式：纯色2件套黑色；
}

标题

---

就这么简单；）

网格系统可以像任何其他CSS属性一样受到影响。默认情况下，可以使用一列设置栅格，然后在视口足够宽时将其展开为两列。请注意

网格模板区域

定义的更改

.grid{
显示：网格；
/*一列三行用于移动设备*/
网格模板列：自动；
网格模板行：自动；
网格模板区域：
“标题”
“内容上限”
“内容较低”；
栅隙：20px；
}
@介质（最小宽度：768px）{
.电网{
/*两列两行，用于平板电脑及更高版本*/
网格模板柱：1fr 1fr；
网格模板行：自动；
网格模板区域：
“标题内容上限”
“标题内容较低”；
栅隙：20px；
}
}
.头衔{
网格区域：标题；
}
.内容上限{
网格区域：内容；
}
.内容较低{
网格区域：内容；
边框样式：纯色2件套黑色；
}

标题

您需要使用

媒体查询

并在多个断点处更改网格系统，直到达到所需的结果。不需要重复1项：）此答案可以通过解释加以改进。这也是一个不正确的答案。除非

网格模板区域

属性也被覆盖，否则它将为额外的列生成一个额外的隐式网格轨迹，并且内容仍将是两列。堆栈溢出的目的是让答案对未来的读者有用，而不仅仅是问题的作者。作者在CSS网格方面的经验水平（以及他们的性别）不应该被假设。谢谢大家，你们是救命恩人：）我已经标记了Seans。

      @media screen and (max-width: 414px) {
       .grid{
          grid-template-columns: repeat(1, 1fr);
        } 
      }