带你入门 CSS Grid 布局

更新时间：2024-12-29 20:36:43

三月中旬，两大浏览器 Firefox 和 Chrome 正式支持 CSS Grid，标志 Web 开发进入新阶段。

CSS Grid 的重要性在于它是首个真正布局系统，允许开发者高度控制页面显示效果，摒弃以往复杂布局和技巧。通过使用 Grid，Web 开发变得更简洁友好。

Grid 通过设置行数和列数实现布局。以展示字母串为例，通过设置 grid-template-columns 创建两列网格，调整 grid-column-gap 控制列间距，实现字母并排显示。

添加新字母后，布局调整依据已有设置，列数量不变，新增字母自动填充。为显示字母间距离，需设置 grid-row-gap。

添加新列或调整 fr 值可创建非对称网格布局。响应式网格通过调整 grid-template-columns 达到不同屏幕尺寸的布局变化。

Grid 属性复杂度高于本文介绍，但本文提供良好起点。学习 grid-template-rows 等属性后，可创建复杂布局。

Grid 让界面显示方式革新，不再依赖臃肿 CSS 框架和布局技巧。理解和使用 Grid 能重塑界面设计。

浏览器支持情况、相关学习资源链接等信息见原文。

欢迎留言分享观点和感受。如获启发，不妨点个赞。关注知乎专栏和 LeviDing 公众号，获取更多精彩内容。