CSSグリッド組み立て

列と行のサイズ、すき間、エリアの名前を決めると、その場でグリッドを描いて CSS（display:grid）を書き出します。

作り方

列の幅（grid-template-columns）

行の高さ（grid-template-rows）

すき間（gap）

名前付きエリア（grid-template-areas）

クラス名

プレビュー

CSS


      

      
fr は「残りの幅を比率で分ける」単位で、px や auto の列を先に確保した残りを分けます。minmax(最小px, 最大fr) にすると、狭くなっても最小幅より細くなりません。プレビューは実際のCSSグリッドで描いています。幅を変えて、狭い画面での見え方も確かめてください。

    

  





CSSグリッド組み立てでできること
列と行のサイズ、すき間（gap）、名前付きエリアを決めると、実際のCSSグリッドでプレビューを描き、コピーして使えるCSSを書き出します。ヘッダー・サイドバー・本文・フッターのような画面の骨組みを作るときに使います。
使い方
  1. 「作り方」で「列と行を決める」か「自動で並べる（repeat）」を選びます。
  2. 「列と行を決める」では、列の数・行の数（1〜12）を入れ、列ごと・行ごとに fr・px・%・auto・minmax から単位を選んで値を入れます。「自動で並べる」では auto-fit か auto-fill と、1枚の最小幅（px）を決めます。
  3. 「すき間（gap）」に行と列のすき間をpxで入れます。
  4. エリアを使う場合は、表に1行ずつセルの名前をスペースで区切って書きます（空けるセルは「.」）。列の数と合わない、長方形でないなどの問題があると、理由が表示されます。
  5. プレビューで形を確かめ、「幅」のスライダーで狭い画面の見え方も確認してから、「CSSをコピー」でコピーします。
計算の仕組みと注意点
よくある質問
CSSグリッドで「ヘッダー・サイドバー・本文・フッター」のレイアウトはどう書きますか？
grid-template-areas に "header header" "sidebar main" "footer footer" のように書き、子要素に grid-area で名前を付けます。初期表示がこの例になっているので、列の幅やすき間を変えながらCSSを確かめられます。
auto-fit と auto-fill の違いは何ですか？
どちらも入るだけ列を作りますが、アイテムが少ないとき auto-fit は空いた列を詰めてアイテムを広げ、auto-fill は空の列を残します。「自動で並べる」で並べ方を切り替え、プレビューの数を減らすと違いが見えます。
grid-template-areas が効かないのはなぜですか？
各行のセルの数が列の数と違う、同じ名前が長方形になっていない、名前に使えない文字がある、といった原因がよくあります。エリアの表に入力すると、どの行のどこが問題かを日本語で表示します。
1fr と auto はどう違いますか？
auto は中身の大きさに合わせ、1fr は残りの幅（高さ）を分け合います。行の高さを auto・1fr・auto にすると、本文の行だけが残りの高さに広がる様子をプレビューで確かめられます。