CSS Gridジェネレーター - ビジュアルグリッドレイアウトビルダー オンライン
リアルタイムプレビューでCSS Gridレイアウトを視覚的に作成。列、行、ギャップ、配置、グリッドエリア、アイテム配置を定義 — 100%クライアントサイド、サーバーへのデータ送信なし。
よくある質問
CSS Gridとは何ですか？
CSS Grid Layoutは、行と列を同時に定義して複雑なページレイアウトを作成できる2次元CSSレイアウトシステムです。1次元のFlexboxとは異なり、水平方向と垂直方向のレイアウトを同時に処理します。
このCSS Gridジェネレーターの使い方は？
1. 列と行のトラックサイズを設定してグリッド構造を定義します。2. ギャップスライダーでセル間隔を設定します。3. 配置プロパティを設定します。4. グリッドアイテムを追加して配置を設定します。5. プリセットレイアウトを試してみましょう。6. 生成されたCSSとHTMLコードをコピーします。
データは安全ですか？
はい、完全に安全です。このツールはクライアントサイドJavaScriptを使用してブラウザ内で完全に動作します。データはサーバーに送信されません。
CSS GridとFlexboxの違いは？
CSS Gridは2次元（行と列の両方）、Flexboxは1次元（行または列）です。ページレベルのレイアウトにはGrid、シンプルな線形レイアウトにはFlexboxを使用します。
grid-template-areasとは何ですか？
grid-template-areasは、数値のライン番号の代わりに名前付き領域を使用してレイアウトを定義します。'header'、'sidebar'、'main'などの名前を割り当てて、より読みやすいCSSを作成できます。
fr単位とは何ですか？
fr（fractional）単位は、グリッドコンテナ内の利用可能な空きスペースの割合を表します。例えば、1fr 2fr 1frは中央の列が両側の2倍の幅を持つ3列を作成します。
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;