この記事は人間が書きました
はじめに
こんにちは、赤神です！
この記事は、「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>