zaqro toolszaqro tools

CSSグリッドジェネレーター

CSS Gridレイアウトをビジュアルに生成。プリセットから選択するか、カラム・行・ギャップ・アラインメントを個別設定。HTML+CSSコードをワンクリックでコピー。

プリセット

グリッド設定

px
px

トラック設定

カラム

1
2

行

1

プレビュー

1
2

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  column-gap: 16px;
  row-gap: 16px;
  justify-items: stretch;
  align-items: stretch;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
</div>

CSS Gridとは

CSS Grid Layout（グリッドレイアウト）は、CSSの2次元レイアウトシステムです。 行と列の両方向にアイテムを配置でき、Flexboxでは難しかった複雑なレイアウトも シンプルなCSSで実現できます。2017年以降、主要ブラウザすべてでサポートされています。

fr単位の仕組み

fr（fraction）は、グリッドコンテナ内の利用可能なスペースを比率で分割する単位です。 例えば 1fr 2fr と指定すると、2列目が1列目の2倍の幅になります。pxや%と組み合わせることで、固定幅サイドバー＋フレキシブルメインコンテンツ のようなレイアウトも簡単に作れます。

minmax()関数

minmax(200px, 1fr)のように記述すると、最小200px・最大は残りスペースを均等分割、 というレスポンシブ対応のトラックサイズが指定できます。メディアクエリなしでも ある程度のレスポンシブレイアウトが実現可能です。

レスポンシブグリッド

repeat(auto-fit, minmax(250px, 1fr))のパターンを使うと、 コンテナ幅に応じてカラム数が自動調整されるレスポンシブグリッドが実現できます。 このジェネレーターで基本的なグリッドを生成し、必要に応じてrepeat()やメディアクエリを 追加するのが効率的なワークフローです。

GridとFlexboxの使い分け

  • Grid: 行と列の2次元レイアウト。ページ全体のレイアウト、カードグリッド、ダッシュボードに最適。
  • Flexbox: 1次元（行または列）のレイアウト。ナビゲーション、ツールバー、カード内のコンテンツ配置に最適。
  • 両者は排他ではなく、Gridコンテナの中にFlexboxアイテムを配置するなど、組み合わせて使うのが一般的です。