Archipela / Dev / CSS Grid生成

⬛ CSS Grid生成

CSS Gridのレイアウトを視覚的に作成します。列数・行数、各列の幅、行の高さ、ギャップ、配置を設定すると、grid-template-columns などを含むCSSがリアルタイムに生成されます。すべての処理はブラウザ内で完結します。

3
2
10px
10px 

        

          
        

      

    


    
    

    

      

        
📘 使い方

        
    
          
  1. 「列数」「行数」スライダーでグリッドの大きさを決めます。プレビューにはセルが行×列の数だけ並びます。
    2. 
          
  2. 「列の幅」で各列を 1fr・2fr・auto・px・minmax() から選びます。「行の高さ」は全行に適用されます。
    3. 
          
  3. 「列gap／行gap」で間隔、justify-items・align-items でセル内の配置を調整します。
    4. 
          
  4. 「よく使うレイアウト」のプリセットで一般的な構成を読み込めます。下の「生成されたCSS」を「CSSをコピー」で利用します。
    5. 
        

      

      

        
❓ よくある質問

        

          
fr 単位とは何ですか？
            
fr（fraction）はグリッドコンテナ内の余った空間を分け合う比率の単位です。1fr 2fr なら2列目が1列目の2倍の幅になります。レスポンシブなレイアウトに適しています。

          
minmax() はどんなときに使いますか？
            
minmax(100px, 1fr) は「最小100px、最大は余白いっぱい（1fr）」という意味です。列が狭くなりすぎるのを防ぎつつ、広い画面では伸びるカラムを作れます。

          
プリセットの「聖杯レイアウト」とは？
            
ヘッダー・フッターと、左サイドバー・メインコンテンツ・右サイドバーの3カラム構成を指す古典的なレイアウトです。本ツールでは中央を 1fr、両サイドを固定幅に近い比率にした列構成を読み込みます。

          
設定内容はサーバーに送信されますか？
            
いいえ。グリッドの計算とCSS生成はすべてお使いのブラウザ内（クライアントサイド）で行われ、設定内容がサーバーへ送信・保存されることはありません。