CSS Grid布局是什么？
CSS Grid是浏览器原生的二维布局系统，可以同时控制行和列。它适合页面骨架、卡片网格、图片墙、后台管理布局以及需要精确对齐的响应式界面。
Grid和Flex怎么选？
- 使用Grid
- 需要同时定义行和列，或让多个子项形成规则网格时。
- 使用Flex
- 主要沿一个方向排列，例如导航、按钮组、工具栏。
- 组合使用
- 页面整体骨架可以使用Grid，某个网格单元内部再用Flex排列按钮或表单。
生成Grid布局的步骤
- 打开Yeo工具箱的Grid布局生成工具。
- 设置列数、行数和网格间距gap。
- 调整子项的跨行、跨列和对齐方式。
- 在预览区确认布局和响应式效果。
- 复制生成的HTML与CSS代码，放入项目中测试。
常用Grid代码示例
- 三等分列
- grid-template-columns: repeat(3, minmax(0, 1fr));
- 固定与自适应
- grid-template-columns: 240px minmax(0, 1fr);
- 设置间距
- gap: 16px;
- 子项跨两列
- grid-column: span 2;
- 内容居中
- justify-items: center; align-items: center;
响应式布局建议
- 使用minmax(0, 1fr)可减少长文本或图片把网格撑破的问题。
- 小屏幕可把repeat(3, 1fr)改为repeat(1, 1fr)，避免内容过窄。
- 优先使用gap设置行列间距，减少子元素外边距折叠和重复代码。
- 给图片和固定格式组件设置明确的宽高或宽高比，减少布局抖动。
常见问题
- 1fr是什么意思？
- fr表示剩余空间的分配比例。三列都使用1fr时通常均分可用宽度。
- 为什么Grid内容溢出？
- 检查子项的min-width、长单词、图片宽度和grid-template-columns，必要时使用minmax(0, 1fr)和overflow处理。
- Grid支持旧浏览器吗？
- 现代浏览器对CSS Grid支持良好。需要兼容旧系统时应核对项目浏览器范围，并准备替代布局。
- Grid生成器生成的代码可以直接用吗？
- 可以作为起点，但仍应在真实项目、不同屏幕和浏览器中进行测试。
总结
Grid最适合二维布局。先把行列结构定义清楚，再设置间距、对齐和响应式规则，生成的代码会更容易维护。