この記事は人間が書きました

はじめに

こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。

「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca

`auto-fit` と `auto-fill` の違い

auto-fit と auto-fill は、repeat() 関数の中で使うキーワードです。「コンテナの幅に収まるだけ、自動的に列を詰めて（fill） / 合わせて（fit）ください」という命令になります。

この2つのキーワードは同じように振る舞いますが、アイテム数が少ないときにだけ違いが現れます。

auto-fill（詰める）
アイテム数が少なくても、利用可能なスペースに空の列をどんどん詰めていきます。そのため、アイテムは指定された最小幅を保ち、伸びません。

auto-fit（合わせる）
空の列は作らず、既存のアイテムをコンテナの幅に合わせて引き伸ばします。

ほとんどの場合、アイテムをコンテナ幅いっぱいに広げたいので、auto-fit の方が実用的でよく使われるそうです。

`auto-fit` と `minmax()` の組み合わせ技

この auto-fit と minmax() を組み合わせることで、メディアクエリを使わずに、CSS 一行でレスポンシブなグリッドレイアウトが完成します。

例えば、grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); は、「コンテナの中に、最低250pxの幅を持つアイテムを入れるだけ並べてください。余ったスペースは、全てのアイテムで均等に分け合って伸びてください」という意味になります。

作成したコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フロントエンド1000本ノック 0060</title>
</head>
<body style="display: flex; flex-direction: column; min-height: 100vh;">

  <header style="display: flex; justify-content: space-between; align-items: center;">
    <div>
      <a href="/">
        <img src="img/logo.png" alt="フロントエンド1000本ノック">
      </a>
    </div>
  </header>

  <div style="display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

  <footer>
    <p>Copyright 2025</p>
    <p>フロントエンド1000本ノック</p>
  </footer>

</body>
</html>