网格布局

大白话解释

网格布局是先把页面横竖切成一张表，再决定每块内容放在哪一格、占几格。它横竖两个方向都管，比只能管一行的弹性布局更能干。

像装修前先在墙上画好瓷砖格子，电视占三格宽、柜子占两格宽，哪块空着哪块满，一眼看得清清楚楚。

后台管理页、图片墙、数据仪表盘这类「一堆方块整齐排开」的界面，基本都是它的地盘。

什么时候会遇到

• 做一个图片墙，不管几张图都要排成整齐的方阵。
• 后台首页摆一堆数据卡片，大屏两列、手机一列。
• 页面要左边导航、右边内容、上面还有个顶栏，用网格划区域最清楚。
• 布局牵扯到列宽对齐，弹性布局怎么调都对不齐。
• 设计稿里元素横竖都卡在同几条线上，需要按格子定位。
• 用 Tailwind 写的那几个以 grid 开头的类名，就是在用它。

可以直接对 Agent 说

「把后台首页改成网格布局：手机一列、平板两列、大屏三列，卡片间距 16px，高度自动等高，用网格布局实现。」

「这个页面要左侧 240px 固定导航、右侧内容自适应、顶部 64px 顶栏，用网格的区域命名写法，把每块区域名字标清楚。」

「这个图片墙现在用弹性布局排的，最后一行总是不齐。帮我改成按格子排，列宽自适应，最后一行也能对齐。」