Grid网格生成器

如何使用Grid网格生成器

• 设置列数、行数，或在模板区拖拽定义每格宽高
• 调行列间距（gap）和对齐方式
• 网格区实时预览，可加占位块看分布
• 复制 grid-template-columns 等一组 CSS

Grid网格生成器功能说明

• 可视化配置 display:grid、行列模板、gap、对齐
• 支持 fr、repeat、minmax 等单位
• 复杂响应式栅格拖拽即可生成

注意事项

• 子项可用 grid-column／row 跨格，需要时单独设置
• fr 单位和 minmax 是网格自适应的关键，多试几次
• IE 对 Grid 支持差，需兼容老浏览器时另做方案