ドラッグ操作でCSSグリッドレイアウトを視覚的に作成し、HTML/CSSコードを自動生成する無料ツール
<div class="grid-container"> </div>
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 8px;
width: 100%;
height: 500px;
}
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
grid-template-rows: auto;
height: auto;
}
.grid-container > * {
grid-area: auto;
}
}ホーリーグレイル・12カラム・カードギャラリー・ダッシュボードなど、CSS Gridで作る定番レイアウト10種をコピペで使えるプリセットとして公開しています。
header・nav・main・aside・footerで構成される定番のホーリーグレイルレイアウト。CSS Gridのgrid-template-areasでシンプルに実装できます。
グリッドシステムBootstrap風の12カラムグリッドシステムをCSS Gridで実装。repeat(12, 1fr)でレスポンシブな基盤が作れます。
カードUI3列×複数行のカードギャラリーをCSS Gridで実装。商品一覧やブログ記事一覧に最適なレスポンシブカード配置です。
管理画面サイドバー + メインエリア + KPIカード群を持つダッシュボード定番レイアウト。管理画面・分析画面に最適です。
メディアメイン記事 + サブ記事複数を組み合わせたマガジン風レイアウト。ニュースサイトやメディアサイトに最適です。
ギャラリーサイズの異なる写真を敷き詰める非対称ギャラリー。CSS Gridのgrid-row / grid-column spanで実装します。
料金・LP3プラン横並びの料金表をCSS Gridで実装。SaaS・サービスサイトの料金ページで使われる定番レイアウトです。
LPランディングページ定番の、ヒーローエリア + 3つの特徴紹介セクションをCSS Gridで実装します。
メディアメインコンテンツ + サイドバー構成のブログレイアウト。2カラム構成の基本をCSS Gridで実装します。
ECECサイトの商品一覧で使われる4列グリッドレイアウト。整然と商品カードを並べる構成をCSS Gridで実装します。
ガイドCSS Grid Generatorの基本操作、よくある質問、CSS GridとFlexboxの使い分けなどを初心者向けに解説しています。