企业官网建设流程全解析

第8讲用Flex做了4列商品列表。本讲用更现代的Grid重新做，并加上响应式——同一份代码，在手机（375px）、平板（768px）、桌面（1440px）下表现完全合适。
建议先点赞 + 收藏 + 关注，写响应式布局时随时回查。

一、为什么需要Grid（Flex不够用了吗）

Flex是一维布局——一行或一列内排得漂亮，但要做「整页二维网格」就费劲。
比如电商首页常见的「左大图 + 右四小图」、「上图下文3列」这种行列都需要精确控制的场景，Flex要靠嵌套 + 宽度计算 + flex-basis hack才能做。

Grid是二维布局——行和列同时控制，写起来更声明式：「这块是第 列第2行，那块跨2列」，画个图就能写出来。

实际对比

Flex 4列商品：

.goods-grid{display:flex