CSS网格布局
可视化CSS Grid布局生成器，调整列行模板、间距、对齐方式，支持子元素精确定位
CSS Grid 布局生成器说明
CSS Grid Layout 是 CSS 中最强大的二维布局系统，专为解决复杂的网页布局而设计。它可以同时控制行和列，比 Flexbox 更适合整体页面布局。
grid-template-columns：定义列轨道大小。常用单位 fr（比例分配）、px、%、auto、minmax(min, max)。简写 repeat(3, 1fr) 等价于 1fr 1fr 1fr。
grid-template-rows：定义行轨道大小，语法同 columns。设为 auto 时行高由内容决定。
gap：设置网格间距。gap: 10px 统一间距，row-gap 和 column-gap 可独立设置行列间距。
grid-auto-flow：控制自动放置算法。row（按行填充，默认）、column（按列填充）、dense（密集填充，填充前面留下的空位）。
justify-items / align-items：控制所有子元素在各自网格单元内的水平/垂直对齐。stretch（拉伸，默认）、start、end、center。
justify-content / align-content：当网格总尺寸小于容器时，控制整个网格在容器内的对齐方式。支持 start、center、space-between、space-around、space-evenly。
子元素定位：通过 grid-column 和 grid-row 精确控制子元素位置和跨度。如 grid-column: 1 / 3 表示从第1条线到第3条线（跨2列），grid-row: span 2 表示跨2行。
预设方案：提供三列布局、侧边栏+主内容、画廊网格、仪表盘、瀑布流五种预设。点击预览区子元素可单独编辑其行列定位和对齐方式。