CSS Grid生成器 - 可视化网格布局构建器 在线工具
通过实时预览可视化创建CSS Grid布局。定义列、行、间距、对齐方式、网格区域和项目放置 — 100%客户端处理，不向服务器发送任何数据。
常见问题
什么是CSS Grid？
CSS Grid Layout是一个二维CSS布局系统，可以通过同时定义行和列来创建复杂的页面布局。与一维的Flexbox不同，CSS Grid同时处理水平和垂直布局。
如何使用这个CSS Grid生成器？
1. 设置列和行的轨道大小来定义网格结构。2. 使用间距滑块设置单元格间距。3. 配置对齐属性。4. 添加网格项目并设置其位置。5. 尝试预设布局。6. 复制生成的CSS和HTML代码。
我的数据安全吗？
是的，完全安全。此工具完全在浏览器中使用客户端JavaScript运行。不会向任何服务器发送任何数据。
CSS Grid和Flexbox有什么区别？
CSS Grid是二维的（同时处理行和列），而Flexbox是一维的（行或列）。页面级布局使用Grid，简单的线性布局使用Flexbox。它们相互补充。
什么是grid-template-areas？
grid-template-areas允许您使用命名区域而不是数字行号来定义布局。将'header'、'sidebar'、'main'等名称分配给区域，使CSS更具可读性。
fr单位是什么意思？
fr（分数）单位表示网格容器中可用空间的比例。例如，1fr 2fr 1fr创建三列，其中中间列的宽度是两侧的两倍。
grid-auto-flow如何工作？
grid-auto-flow控制自动放置的项目如何填充网格。'row'从左到右、从上到下放置。'column'从上到下、从左到右放置。'dense'会填补空隙以创建更紧凑的布局。
代码示例
// CSS Grid Generator - JavaScript Implementation
function formatTrackSize(value, unit) {
if (unit === 'auto') return 'auto';
return `${value}${unit}`;
}
function generateGridCSS(options = {}) {
const {
display = 'grid',
columns = [{ value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }],
rows = [{ value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }],
rowGap = 0,
columnGap = 0,
justifyItems = 'stretch',
alignItems = 'stretch',
justifyContent = 'start',
alignContent = 'start',
gridAutoFlow = 'row',
areas = null,
} = options;
const rules = [`display: ${display}`];
rules.push(`grid-template-columns: ${columns.map(t => formatTrackSize(t.value, t.unit)).join(' ')}`);
rules.push(`grid-template-rows: ${rows.map(t => formatTrackSize(t.value, t.unit)).join(' ')}`);
if (areas && areas.length > 0) {
const areasStr = areas.map(row => `"${row.join(' ')}"`).join('\n ');
rules.push(`grid-template-areas:\n ${areasStr}`);
}
if (rowGap > 0 || columnGap > 0) {
if (rowGap === columnGap) {
rules.push(`gap: ${rowGap}px`);
} else {
rules.push(`gap: ${rowGap}px ${columnGap}px`);
}
}
if (justifyItems !== 'stretch') rules.push(`justify-items: ${justifyItems}`);
if (alignItems !== 'stretch') rules.push(`align-items: ${alignItems}`);
if (justifyContent !== 'start') rules.push(`justify-content: ${justifyContent}`);
if (alignContent !== 'start') rules.push(`align-content: ${alignContent}`);
if (gridAutoFlow !== 'row') rules.push(`grid-auto-flow: ${gridAutoFlow}`);
return rules.map(r => `${r};`).join('\n');
}
// Usage
console.log(generateGridCSS({
columns: [{ value: 1, unit: 'fr' }, { value: 2, unit: 'fr' }, { value: 1, unit: 'fr' }],
rows: [{ value: 100, unit: 'px' }, { value: 1, unit: 'fr' }],
rowGap: 16,
columnGap: 16,
}));
// display: grid;
// grid-template-columns: 1fr 2fr 1fr;
// grid-template-rows: 100px 1fr;
// gap: 16px;