如何用CSS Grid实现响应式布局（900px断点适配）

嘿，这个问题其实很容易搞定！你已经完成了桌面端（900px及以上）的布局，现在只需要借助CSS媒体查询（Media Queries），针对小屏幕尺寸重写Grid的列配置就能实现图2的适配效果啦。

完整代码示例 #

.container {
  display: grid;
  grid-template-columns: 250px auto 250px; /* 900px及以上的三列布局 */
  grid-column-gap: 1rem;
}

/* 针对900px以下的屏幕调整布局 */
@media (max-width: 899px) {
  .container {
    grid-template-columns: 1fr; /* 改成单列布局，子元素自动占满宽度 */
    /* 如果图2是其他布局（比如两列），可以改成类似grid-template-columns: 1fr 1fr; 按需调整 */
  }
}

代码说明 #

1. 桌面端基础布局：你原来写的grid-template-columns: 250px auto 250px已经完美实现了900px及以上的三列效果，这部分保留即可。
2. 媒体查询适配小屏幕：通过@media (max-width: 899px)这个规则，我们告诉浏览器：当屏幕宽度小于900px时，应用花括号里的样式。这里把grid-template-columns改成1fr，意味着容器只显示一列，所有子元素会垂直堆叠排列，正好对应图2的移动端布局。
3. 可选调整：如果图2不是单列布局，你可以根据实际需求修改grid-template-columns的值，比如两列就写1fr 1fr，或者固定宽度的列组合，灵活调整就行。

这样修改后，你的布局就能在不同屏幕尺寸下自动切换啦！

内容的提问来源于stack exchange，提问作者Akanksha Sharma