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、両サイドを固定幅に近い比率にした列構成を読み込みます。

          
🔊 버튼으로 8비트풍 배경음을 켜고 끌 수 있습니다(설정은 기억됩니다)
            
いいえ。グリッドの計算とCSS生成はすべてお使いのブラウザ内（クライアントサイド）で行われ、設定内容がサーバーへ送信・保存されることはありません。