网站CSS Grid布局：复杂页面的排版利器
网站CSS Grid布局：复杂页面的排版利器
CSS Grid是二维布局系统，比Flexbox更适合复杂页面排版。这篇文章介绍Grid的核心概念和常用技巧。
Grid vs Flexbox
Flexbox是一维布局，适合单行或单列排列。Grid是二维布局，同时控制行和列，适合整体页面结构。
两者不是替代关系，而是互补。页面大结构用Grid，组件内部用Flexbox。
核心概念
容器和项目。display: grid定义容器，直接子元素成为项目。
轨道定义。grid-template-columns和grid-template-rows定义列和行的大小。
区域命名。grid-template-areas可以用名字定义布局，代码可读性很好。
常用布局模式
圣杯布局。header、footer全宽，中间main和sidebar并排，几行代码就能实现。
响应式网格。repeat(auto-fit, minmax(250px, 1fr))，自动换行，适配各种屏幕。
重叠布局。Grid可以让项目重叠，实现文字覆盖图片等效果。
浏览器支持
现代浏览器都支持Grid，IE11需要前缀。移动端iOS 10.3+、Android 5+都支持。
Grid让复杂布局变得简单，是现代Web开发的必备技能。