🧰業務効率化
CSS Gridレイアウト作成
列数やカード幅を試してGrid CSSを生成
- ✓ 無料
- ✓ 登録不要
- ✓ ブラウザだけで動作
- ✓ データ送信なし
ファイルや入力内容は、原則としてお使いのブラウザ内で処理されます。
CSS Gridの列数やカード幅を画面で確認しながら、レイアウト用のCSSとHTMLを作成できます。入力値はブラウザー内だけで処理し、送信・保存しません。
1. レイアウト例を選ぶ
2. 列・間隔・揃え方を調整
3. プレビュー
4. CSSとHTMLをコピー
使い分けのポイント
- カード数が変わる一覧には、幅に応じて列数が変わる「レスポンシブ」が便利です。
- 左右サイドバーは700px以下で1列に戻るCSSを含めています。
- 生成後は実際の文章や画像を入れ、極端に長い内容でも崩れないか確認してください。