CSS Gridでauto指定したのに均等幅になる原因と対処法

起きた不具合

• grid-template-columns: repeat(3, auto); と指定したのに、なぜか3カラムが均等な幅に広がってしまった。
• 本来は「カラム幅をバラバラで、中身に合わせて表示」したいのに、期待通りにならない。

---

試したこと

• grid-template-columns: repeat(3, auto); を指定して、中身に合わせる設定を試した。
• しかし、カラム幅がすべて同じに揃ってしまい、解決しなかった。

---

解決策と原因

解決策

.grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start; /* ← これを追加 */
}

原因

• CSS Grid では justify-content のデフォルトが normal（実質 stretch）になっており、
  コンテナに余白がある場合、自動的に各カラムに均等に余白を配分してしまう。
• そのため、auto を指定しても「均等幅」っぽく見えてしまった。
• justify-content: start; を追加すると、余白を配分せず左寄せになり、各カラムが中身の幅通りに表示されるようになった。

---

その他のパターン（補足）

• 中身に合わせたい場合 → auto または max-content
• 均等幅にしたい場合 → 1fr
• 「バラバラ幅で中央寄せ」にしたい場合 → justify-content: center;
• 余白の配分方法は justify-content、セル内の配置は justify-items で制御できる