2022.12.08 HTML/CSS

CSS Gridでメディアクエリを使わずにレスポンシブ対応

CSS Grid のauto-fitまたはauto-fillとminmaxで、メディアクエリを使わずにレスポンシブ対応が可能です。
これは便利すぎる…！

以下の例の場合、子要素の横幅が140pxより小さくなると自動的に改行します。
PCで閲覧している場合は、ウィンドウサイズを変えてみると横幅に応じてカラム数が変わっていくのがわかると思います。

<div class="grid-items">
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
</div>

.grid-items {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    grid-gap: 5px;
}

【CSS Gridでレスポンシブ対応の例】

item

auto-fitとauto-fillの違い

auto-fit

auto-fit は、子要素の数が少ない場合は、子要素の幅が親要素の横幅いっぱいになるまで広がります。
例えば最小値60pxで8個の子要素が入るけど、子要素が2個しかない、という場合は2個の子要素の横幅が親要素の横幅いっぱいまで広がって空白ができません。

<div class="grid-auto-fit">
  <div>item</div>
  <div>item</div>
</div>

.grid-auto-fit {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    grid-gap: 5px;
}

【auto-fitの例】

item

auto-fill

auto-fill は、子要素が少ない場合は、そのサイズの子要素が入る数分だけの空白ができます。
例えば最小値60pxで8個の子要素が入るけど、子要素が2個しかない、という場合は子要素6個分の空白ができます。

<div class="grid-auto-fill">
  <div>item</div>
  <div>item</div>
</div>

.grid-auto-fill {
  display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    grid-gap: 5px;
}

【auto-fillの例】

item

アーカイブページなんかは、auto-fillにしておけばコンテンツ数が少ないときにもレイアウトが崩れないからいいですね。

CSS Grid