CSS Gridジェネレーター
列、行、その間隔を選ぶか、レスポンシブモードでカードが画面に合わせて自動で並び替わるようにします。プレビューで結果がすぐに確認できます。
使い方CSS Gridでレイアウト
プレビューの角をドラッグして幅をテストできます。項目をタップすると2列分になります。
利用できる言語: 
広告
CSS Gridジェネレーター: 用途
固定の列（2列、3列、4列、サイドバー付きコンテンツ、メニュー付きコンテンツのショートカットあり）か、列が幅に合わせてrepeat(auto-fit, minmax())で調整されるレスポンシブモードを選びます。項目の数と間隔を決めます。
プレビュー上の項目をタップすると2列分になり、プレビューの角をドラッグして幅をテストできます。CSSとHTMLは、コピーするだけで使えます。
使い方
- モードと列を選びます。
- 項目と間隔を決め、項目をタップして2列分にします。
- CSSとHTMLをコピーします。
使うタイミング
- カード、商品、写真のグリッド。
- サイドバー付きのレイアウト。
- 結果を見ながらCSS Gridを学ぶ。
よくある質問
1frとは何ですか？
余った領域の1つ分です。3つの列1fr 1fr 1frは、幅を均等に分けます。2fr 1frなら、1つ目の列が2つ目の2倍になります。
repeat(auto-fit, minmax(220px, 1fr))は何をしますか？
それぞれ最小220pxで、入るだけの列を作り、行全体を埋めるように列を広げます。メディアクエリなしで、レスポンシブなカードのグリッドを作る、最も簡単な方法です。
項目を2列分にするには？
項目にgrid-column: span 2を使います。プレビューで項目をタップすると、1列分と2列分が切り替わり、CSSも更新されます。
本当に無料？
はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。