CSS Grid 网格布局 —— 轻松实现九宫格项目主页

在本次网页作业导航页开发中我用到了 Grid 网格布局。过去做多列排版总是用浮动 float不仅要清除浮动手机端适配还要写大量代码。而 CSS Grid 是二维布局同时控制行与列。我使用display: grid开启网格grid-template-columns: repeat(3,1fr)一键生成均等宽的三列9 个项目自动排成整齐九宫格再用 gap 统一设置卡片间距布局代码精简了一大半。为了适配手机与平板我搭配媒体查询 media在屏幕小于 768px 自动切换为 2 列小于 480px 自动变成单列。一行代码切换多套排版不用再反复调整宽度。总结Grid 非常适合作品集、项目导航这类卡片式页面结合媒体查询轻松完成电脑、平板、手机三端自适应是现代网页布局的核心技术。