CSS Grid ジェネレーター
この CSS Grid 作成ツールは、列数と行数、gap、任意の grid-template の値、アイテムの配置からグリッドレイアウトを作成し、ライブプレビューとそのまま使える CSS を表示します。
px
px
このツールについて
この CSS Grid 作成ツールは、列数と行数、gap、任意の grid-template の値、アイテムの配置からグリッドレイアウトを作成し、ライブプレビューとそのまま使える CSS を表示します。
使い方
- 列数と行数を設定します。
- 列と行の gap を調整します。
- 必要に応じて、200px 1fr 1fr のようなカスタムテンプレートを入力します。
- justify-items と align-items を選び、「CSS をコピー」をクリックします。
知っておきたいこと
- fr 単位は空きスペースを分け合います。1fr 2fr なら、2 列目の幅は 1 列目の 2 倍になります。
- repeat(3, 1fr) は、等幅の 3 列を表す短縮形です。
- column-gap と row-gap は、トラック間の溝の幅を設定します。
- Grid は 2 次元のレイアウトで、行と列をまとめて制御します。
- repeat(auto-fit, minmax(200px, 1fr)) を使うと、メディアクエリなしでレスポンシブなグリッドを作れます。
すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。
よくある質問
CSS で 3 列のグリッドを作るには？
コンテナに display: grid; grid-template-columns: repeat(3, 1fr); を指定し、間隔には gap を追加します。
CSS Grid の fr とは何ですか？
fr は、グリッドコンテナ内の利用可能な空きスペースに対する割合です。
CSS Grid と Flexbox、どちらを使うべきですか？
ページ構造やカードの一覧など 2 次元のレイアウトには Grid が、1 次元の行や列には Flexbox が適しています。
メディアクエリなしでレスポンシブなグリッドを作るには？
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); を使うと、スペースに応じて列が自動で折り返されます。