レイアウト設計にとても便利になるCSS Grid（CSSグリッドレイアウト）。
モダンブラウザが対応して今後活用する機会が増えると思いますが、簡単な操作で希望するレイアウトのgridプロパティを作成してくれるCSSグリッドジェネレーター「CSS Grid Generator」がとても便利だったのでメモ書きとして紹介します。
CSS Grid Generator
まず画面上の「Columns」でカラム数（列数）、「Rows」で行数、「Gap（px）」でブロック間の余白を決めて、あとはブロック化する要素をクリックして、必要に応じてドラッグでブロックを結合しながらレイアウトを形成します。
サイト上に書かれている使い方を訳すと以下の通り。
- 1. 必要に応じて列数、行数、間隔をカスタマイズしてください。
- 2. +マークが付いた四角をクリックして、グリッドに新しい要素を追加してください。
- 3. 右下のハンドルを使って、DIVのサイズを変更してください。
- 4. DIVをドラッグアンドドロップして、希望の位置に移動させてください。
- 5. 最後に、生成されたHTMLとCSSコードをコピーして、あなたのプロジェクトに貼り付けてください。
直感的な操作で簡単にCSS Gridのレイアウトパターンが作成でき、生成されたHTMLとCSSをコピーすることができます。
CSS Gridの対象ブラウザについては以下です。
慣れるまではなかなか組み方の理解が難しいCSS Gridですが、このようなジェネレーターを使ってプロパティに慣れるように活用するのも良いのではないかと思います。
CSS Gridでレイアウトを組む際にぜひ。。。