Webサイトのレイアウトを作るとき、CSSの grid はとても強力なツールです。しかし、基本的な grid-template-columns: repeat(3, 1fr); のような使い方だけではなく、 より柔軟で実用的なテクニック を知っておくと、さらに効率的なコーディングが可能になります。
今回は 「コンテンツ幅にピッタリ合わせる方法」 や 「実践的なGridの活用術」 を紹介します！
1. Gridの幅をコンテンツにピッタリ合わせる
デフォルトでは、grid-template-columns: auto auto auto; でカラムの幅がコンテンツサイズに合わせて調整されます。しかし、 親要素が広い場合、意図しない余白ができることもある ため、以下の方法で コンテンツにピッタリ合うグリッド を作ることができます。
1-1. inline-grid を使う
.container {
display: inline-grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #ddd; /* 背景を付けて確認 */
}✅ グリッド全体の幅が、カラムの合計幅にピッタリ合う！
display: inline-grid; を指定すると、 コンテナ全体がコンテンツの幅にフィット するようになります。中央寄せしたい場合は margin: 0 auto; を組み合わせるのもおすすめです。
1-2. max-content を使う
.container {
display: grid;
grid-template-columns: max-content max-content max-content;
gap: 10px;
}✅ 各カラムの幅が、そのカラムのコンテンツの最大幅に揃う！
max-content を指定すると、 カラムごとに内容の長さに応じた最適な幅 を適用できます。文章の長さがバラバラなリストなどに便利です。
1-3. fit-content() を使う
.container {
display: grid;
grid-template-columns: fit-content(200px) fit-content(200px) fit-content(200px);
gap: 10px;
}✅ コンテンツの幅に応じながら、最大幅を制限！
fit-content(200px) を使うと、 コンテンツの幅が200px以下ならそのサイズに、超えたら200pxまでに制限 できます。
2. 実践的なGridの活用テクニック
2-1. minmax() を活用してレスポンシブ対応
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}✅ 画面サイズに応じて、カラム数を自動調整！
minmax(150px, 1fr) を使うことで、カラムが 最小150px・最大フル幅で調整される ので、 ブレイクポイントを明示的に設定しなくても、レスポンシブなレイアウト が作れます。
2-2. subgrid で高さを統一する
.parent {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.child {
display: grid;
grid-template-rows: subgrid;
grid-row: span 1;
}✅ 子要素（.child）が親グリッド（.parent）の行設定を継承！
subgrid を使うことで、同じ行の高さを統一する ことができます。これは、カードデザインなどで高さを揃えたいときに非常に便利 です。
※ subgrid は Firefoxでは完全対応 していますが、ChromeやSafariではまだ対応が進行中なので、flexbox での代替も考慮しましょう。
2-3. grid-auto-flow: dense; で自動的に詰める
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: dense;
}
.item:nth-child(2) {
grid-column: span 2;
}✅ 隙間を自動で詰めて、無駄なくレイアウト！
grid-auto-flow: dense; を使うと、空いたスペースに自動で要素が詰め込まれる ようになります。特に、 サイズが異なるカードを並べるときに便利 です。
詳細は別記事にまとめました。
3. まとめ
CSS Gridはとても強力ですが、 便利なプロパティを活用すると、さらに柔軟なレイアウトが可能 になります。
🔹 今日のポイント
✅ inline-grid でグリッド幅をコンテンツにフィットさせる
✅ max-content や fit-content() でコンテンツサイズに合わせる
✅ minmax() を使うとレスポンシブが簡単
✅ subgrid で高さを統一（※Chrome未対応）
✅ grid-auto-flow: dense; で隙間をなくす
こういったテクニックを駆使すれば、 コーディングの効率がアップし、より美しく使いやすいレイアウト を作れます！
ぜひ、実際のWeb制作に取り入れてみてくださいね！✨
コメント