CSSグリッド

CSSグリッドの基本構造を理解する

display: gridは、CSSで複雑なレイアウトを簡潔に制御できる非常に強力なプロパティです。
従来のfloatやflexでは難しかった行列状の整列も、grid-template-columnsやgrid-template-rowsを使えば、明確かつ柔軟に指定できます。
特に、レスポンシブな設計や、同一行・列における正確な位置指定が必要な場面では、CSSグリッドが最も効果を発揮します。

グリッドとレスポンシブデザインの相性

グリッドレイアウトは、minmax()やauto-fit、auto-fillなどの機能を用いることで、画面サイズに応じて自動調整が可能です。
これにより、メディアクエリに頼りすぎずとも柔軟なレスポンシブ設計ができ、開発効率の向上と保守性の向上が同時に実現できます。
特にスマホ・タブレット・PCなど多様なデバイスに対応するWeb制作では、CSSグリッドのレスポンシブ対応力は非常に魅力的です。

コンテンツの配置制御に役立つグリッドライン

CSSグリッドでは、行や列の区切りをgrid lineで指定でき、grid-column-startやgrid-row-endなどのプロパティで、アイテムの開始位置や終了位置をピンポイントで設定できます。
これにより、アイテムを複数のカラムや行にまたがって配置するなど、レイアウトの自由度が飛躍的に高まります。
フッターの幅を揃えたり、サイドバーの範囲を限定したりといった用途にも柔軟に対応できるため、UI設計の幅が広がります。

ネーミンググリッドで可読性を向上

grid-template-areasを使えば、グリッドに名前をつけてレイアウトを定義できます。
これにより、HTML構造とCSSの関係が視覚的に明瞭になり、チーム開発や保守時の理解コストを大幅に削減できます。
たとえば、"header header"
"sidebar main"
"footer footer" のように書けば、視覚的にも構造的にもわかりやすいグリッド設計が可能です。

グリッドを活用した現代的なデザインアプローチ

CSSグリッドは、雑誌風のレイアウトやカード型UI、ダッシュボードなど、現代的なWebデザインとの相性が非常に良好です。
また、gapで余白を調整できるため、marginによる複雑な調整が不要になります。
グリッドベースのレイアウトは視覚的な秩序を与えるだけでなく、コードベースでもロジカルな構造を維持しやすいため、デザイナーとフロントエンド開発者の共通理解にも貢献します。

class GridGenerator {
	constructor() {
		this.state = {
			columns: 3, rows: 5, columnGap: 8, rowGap: 8, columnSizes: ['1fr', '1fr', '1fr'], rowSizes: ['1fr', '1fr', '1fr', '1fr', '1fr'], items: []
		};
		this.selected = null;
		this.dragging = false;
		this.init();
	}
}

最初に初期状態（列数・行数・ギャップ・サイズなど）を `this.state` にまとめて定義しています。こうしておくことで、状態管理がしやすくなり、変更にも柔軟に対応できます。

init() {
	this.bindEvents();
	this.render();
}

初期化メソッドではイベントを設定して、初回の描画処理を実行しています。ユーザー操作にすぐ対応できるように設計されています。

document.getElementById('columns').addEventListener('input', () => {
	this.updateState();
	this.filterItems();
	this.render();
});

これは入力欄の値が変更されたときの処理です。例えば列数が変更されたら、内部の状態を更新し、既存のアイテム配置が範囲外になっていないかをチェックし、画面を再描画します。

adjustSizes(newCols, newRows) {
	while (this.state.columnSizes.length < newCols) this.state.columnSizes.push('1fr');
	// 省略
}

列や行の数が変更されたとき、それに合わせてサイズ情報も追加・削除して調整します。こうすることで表示のズレやバグを防ぎます。

this.updateGridDisplay();

このメソッドでは、実際のグリッドのCSSスタイル（列幅、行高、ギャップなど）をDOMに反映しています。

input.addEventListener('input', (e) => {
	this.state.columnSizes[c] = e.target.value || '1fr';
	this.updateGridDisplay();
	this.renderCode();
});

ユーザーが列幅・行高を入力するたびに、グリッドに即反映されるようにしています。リアルタイムで視覚的に確認できるのがこのツールの魅力です。

getOccupiedCells() {
	const occupied = Array(this.state.rows).fill().map(() => Array(this.state.columns).fill(false));
	// 中略：アイテムの範囲をtrueにしていく return occupied;
}

空いているセルを判定するための処理です。これにより、空セルに「＋」マークを表示して新しいアイテムを追加できるようになります。

startDrag(e, itemId) {
	// ドラッグスタートの処理
}

グリッド内のアイテムをドラッグして移動できる機能の処理です。どのセルまで動かしたかをマウスの移動量から計算して配置を更新しています。

startResize(e, itemId) {
	// リサイズ処理の開始
}

こちらは、グリッドアイテムの右下のハンドルをドラッグしてリサイズできる機能です。ユーザーの直感的な操作に対応するためのロジックです。

renderCode() {
	let css = '.grid-container {\n display: grid;\n'; css += ` grid-template-columns: ${this.optimizeGridSizes(this.state.columnSizes)};\n`;
	// 中略
	}
}

この関数では、実際に生成されるHTMLとCSSのコードをテキストとして出力しています。ユーザーが作成したグリッドの構造をそのままコピーできるようにしています。

optimizeGridSizes(sizes) {
	// 連続する値をrepeatでまとめる
} 

CSSの見た目をきれいにするため、同じサイズが連続していたら `repeat()` を使って簡潔にしています。可読性とコードのスマートさを両立する工夫です。