如何通过CSS Grid媒体查询让首个网格项占100%，其余项各占33.333%？

嘿，我来帮你搞定这个CSS Grid的响应式布局问题！先理清楚你的核心需求：

• 桌面端已经搞定了：4个网格项各占25%宽度，用grid-template-columns: repeat(4, 1fr)实现得很完美
• 现在要在指定断点下调整：第一个网格项占100%宽度，剩下三个自动换行后各占33.333%，而且必须用CSS Grid实现

你之前尝试的写法有点问题哦：直接设置grid-template-columns: 100% 1fr 1fr 1fr或者100% 33.333% 33.333% 33.333%会让网格总宽度超过容器的100%，CSS Grid默认不会自动换行，结果要么出现横向滚动条，要么元素被挤压变形，完全达不到预期效果。

正确的实现方法 #

我们可以利用CSS Grid的列跨度特性来轻松实现，代码如下：

/* 桌面端原有布局 */
.footer-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* 移动端响应式布局（断点可根据你的需求调整，这里用768px举例） */
@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: repeat(3, 1fr); /* 先定义三列均分的网格结构 */
  }
  /* 让第一个网格项横跨所有三列，自然占满整行 */
  .footer-inner > div:first-child {
    grid-column: 1 / -1;
  }
}

为什么这个方法靠谱？ #

• repeat(3, 1fr)会自动让网格容器分成三个宽度完全相等的列，不用手动写33.333%这种容易有精度误差的数值；
• grid-column: 1 / -1是个小技巧：1表示从第1列开始，-1表示到最后一列结束，直接让第一个元素占满整行；
• 剩下的三个网格项会自动排列到下一行，每个占据一列，刚好各占1/3的宽度，完全符合你的需求。

如果你想换一种思路，也可以这么写（不过上面的方法更简洁直观）：

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr; /* 默认一列布局 */
    grid-auto-flow: dense; /* 让网格自动填充空白区域 */
  }
  .footer-inner > div:not(:first-child) {
    grid-column: span 1; /* 非首项各占一列 */
    grid-row: 2; /* 强制放到第二行 */
  }
}

内容的提问来源于stack exchange，提问作者Al-76