UD5工具箱
常见问题
什么是CSS Grid布局？
CSS Grid Layout（网格布局）是CSS中一种二维布局系统，可以同时控制行和列。与Flexbox（一维布局）不同，Grid专为复杂的二维页面布局而设计，能轻松实现以前需要大量嵌套和浮动才能完成的布局效果。它是现代Web布局的基石技术之一，所有现代浏览器都支持，包括移动端浏览器。Grid布局的核心优势在于可以同时处理水平和垂直两个维度的排列，非常适合页面级的整体布局。通过定义行和列的结构，Grid可以精确控制每个子元素在网格中的位置和大小，无需使用浮动或定位。
CSS Grid 和 Flexbox 的区别？
Flexbox是一维布局（沿主轴方向排列），适合组件级别的排列，如导航栏、工具栏、按钮组、卡片内元素排列、垂直居中对齐。Grid是二维布局（同时控制行和列），适合页面级别的宏观布局，如整体页面结构、仪表盘、画廊、复杂网格系统。两者互补而非替代，实际项目中常结合使用：外层用Grid定义页面结构，内层用Flexbox排列组件元素。简单来说，Grid负责宏观的行列结构，Flexbox负责微观的元素排列。选择哪种取决于布局需求：需要控制行和列用Grid，需要在一排中排列元素用Flexbox。
fr单位是什么意思？
fr（fraction）是Grid专用单位，表示"可用空间的一份"。例如grid-template-columns: 1fr 2fr 1fr表示将可用宽度分为4份，第一列占1份、第二列占2份、第三列占1份。fr单位会自动减去gap（间距）后再分配，非常灵活，是Grid布局中最推荐使用的单位。与百分比不同，fr单位可以与固定单位（如px）混合使用，例如200px 1fr表示第一列固定200px，剩余空间按比例分配给第二列。这种混合使用方式在侧边栏布局中非常实用。
如何在移动端使用Grid？
使用媒体查询配合Grid即可实现响应式布局。可以在移动端将多列改为单列（grid-template-columns: 1fr），或使用auto-fill和minmax()让列数自动适应屏幕宽度，无需手动设置断点。推荐写法：grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))，在小屏幕上自动变为单列，大屏幕上自动变为多列。这种方式比传统媒体查询更简洁，列数完全由容器宽度决定。对于需要精确控制断点的场景，可以结合媒体查询手动设置列数。
gap 和 grid-gap 有什么区别？
gap是标准属性名（CSS Box Alignment Module Level 3），grid-gap是旧版名称。现代浏览器都支持简写gap，且它同时适用于Grid和Flexbox。推荐使用gap（或row-gap/column-gap），兼容性已覆盖97%+浏览器。功能完全相同，只是属性名不同。使用gap属性的好处是代码更简洁，且在Grid和Flexbox中保持一致的写法。gap不会影响网格项的大小，只在项之间创建空间。
如何让网格项跨越多列/行？
使用grid-column: span 2可让项跨越2列；grid-row: span 3跨越3行。也可以精确指定起止线：grid-column: 1 / 3表示从第1条线到第3条线（跨2列）。本工具支持可视化设置每个网格项的跨列/跨行属性，点击预览区域的色块即可调整，无需手动计算网格线号。跨列/跨行适合用于突出显示重要内容，如仪表盘中的大面板或特色文章卡片。注意跨项时不要超出网格定义的行列范围，否则该区域会自动扩展网格结构。
CSS Grid 的浏览器兼容性如何？
兼容性非常好！CSS Grid是现代浏览器的标准特性，Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+都完美支持。截至2024年，全球浏览器对Grid的支持率超过95%。IE11存在已知bug（如auto-fill支持不完善），如需兼容IE建议使用Autoprefixer添加前缀或降级为浮动布局。对于大多数现代项目，可以放心使用Grid布局。移动端浏览器也全面支持，包括iOS Safari和Android Chrome，可以放心在响应式项目中使用。