Grid网格布局（二维布局终极神器）
Grid网格布局是CSS中最强大的二维布局系统，唯一可以同时精准控制行和列的布局方案，区别于Flex一维布局（只能控制单方向排列）。Grid可以快速实现规整的栅格布局、卡片矩阵、商品列表、相册网格、官网栅格排版等复杂二维布局，无需计算尺寸、无需清除浮动、无需复杂适配代码，布局效率远超浮动和Flex。
Grid布局核心概念：网格容器、网格项目、网格线、网格单元格、网格区域。给父容器设置display: grid即可开启网格布局，子元素自动成为网格项目，默认单行多列、自适应排布，支持精准定义每一行、每一列的尺寸、间距、跨度。Grid布局完全脱离传统文档流布局思维，以网格矩阵为核心，适合规整、对称、矩阵式页面布局。
网格容器核心常用属性：1、grid-template-columns：定义列的数量和每列宽度，可设置固定像素、百分比、自适应比例、自动填充，支持repeat()简写函数，快速生成多列等宽布局。2、grid-template-rows：定义每一行的高度，规则与列设置完全一致。3、gap：统一设置网格行列间距，替代传统margin间距，避免元素间距重叠、溢出问题，包含row-gap行间距、column-gap列间距。4、justify-items、align-items：控制单元格内子元素的对齐方式，实现批量元素统一居中。
网格项目进阶属性：支持单个子元素跨列、跨行展示，通过grid-column、grid-row设置元素占据的网格线范围，轻松实现不规则栅格布局（如通栏头部、侧边通栏、合并卡片），这是Flex布局难以实现的效果。同时支持自定义网格区域命名，通过grid-area自由摆放元素位置，布局自由度极高。
Grid与Flex布局选型规范：Flex是一维布局，适合单行/单列不规则排列、元素自适应缩放、居中对齐、简单并排，常用于导航栏、按钮组、单行列表；Grid是二维布局，适合行列规整、矩阵式、栅格式布局，常用于商品卡片、图片相册、后台系统布局、官网首页栅格模块。现代前端开发中，Flex+Grid组合使用，可覆盖100%的页面布局场景。
Grid是CSS最强二维布局系统，同时控制行和列，适合规整卡片、栅格页面布局。开启方式：父容器display:grid。核心属性：grid-template-columns定义列宽、grid-template-rows定义行高、gap设置行列间距。
优势：无需浮动、无需清除塌陷、自动均分、适配多列布局，企业级页面卡片布局首选，比Flex更适合规整二维排版。
