网站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开发的必备技能。