最近使ったもの

    ツールを開くと、ここに表示されます。

    CSS Grid生成

    コード生成に対応したビジュアルCSS Gridレイアウト作成ツールです

    このツールを共有

    問題を報告

    非公開の入力内容やファイルは含めずに、問題を説明してください。

    このツールはどのくらい役に立ちましたか?

    このツールはどのくらい役に立ちましたか?

    レイアウト設定

    レイアウトのプリセット

    アイテムごとの配置

    プレビューまたは一覧でアイテムを選択し、プロパティを編集してください。

    CSS Gridクイックリファレンス

    グリッドトラック

    伸縮するトラックにはfr単位、固定トラックにはpx/%、コンテンツに合わせたサイズのトラックにはautoを使用してください。

    repeat()関数

    repeat(3, 1fr)は1fr 1fr 1frの短縮記法です。レスポンシブなグリッドにはauto-fillまたはauto-fitを使用してください。

    複数トラックにまたがるアイテム

    N個のトラックにまたがるにはspan N、すべての列や行にまたがるには1 / -1を使用してください。

    ライブプレビュー

    生成されたCSS

    .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 10px;
}

    設定を変更するか、アイテムを選択してください。プレビューとCSSが同時に更新されます。

    CSS Grid生成について

    CSS Grid生成は、CSS Gridレイアウトを設計・生成するためのインタラクティブなビジュアルツールです。CSS Grid Layoutは、CSSで利用できる最も強力な二次元レイアウトシステムで、列と行を同時に定義できます。このツールでは、実際に操作しながらCSS Gridを学び、試し、本番で使えるコードを生成できます。

    デザイン

    最近追加されたツール

    すべてのツール

    プライバシー設定

    分析、広告、パーソナライズの設定を選択してください。必須ストレージは、テーマや保存したツールなどの機能を維持するために使われます。

    必須ストレージは常に有効です。