CSS Gridでレスポンシブデザインを実現するには？

repeat(auto-fit, minmax(250px, 1fr))を使うと、コンテナ幅に応じて列数が自動調整されます。メディアクエリなしでレスポンシブなグリッドレイアウトが実現できます。

CSS Gridのfr単位とは何ですか？

frは利用可能な空間の割合を表す単位です。「1fr 2fr」は空間を1:2に分割し、「1fr 1fr 1fr」は3等分です。pxや%と混在可能で、残りの空間を柔軟に分配できます。

デザイン・CSS無料登録不要

CSSグリッドレイアウトをGUIで作成。行列数、gap、テンプレートエリアを視覚的に設定しコード生成。レスポンシブ対応の無料ツール。

プリセット

トラック設定

grid-template-columns

grid-template-rows

column-gap16px

row-gap16px

プレビュー

CSS Output

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

FAQ

親要素にdisplay: gridを指定し、grid-template-columnsで列の定義、grid-template-rowsで行の定義をします。例えば「grid-template-columns: 1fr 1fr 1fr」で3等分のカラムレイアウトになります。

読み込み中...