display: grid; の使い方を徹底解説!CSSグリッドレイアウトの基本と応用
Webデザインにおいてレイアウトを効率的に組むために「CSS Grid Layout」は非常に便利な技術です。display: grid;
を使えば、複雑なレイアウトも簡潔に実装できます。
この記事では、CSS Gridの基本から応用テクニックまで、初心者でも理解しやすいように詳しく解説します。
display: grid; とは?
display: grid;
は、CSSのレイアウト手法の一つで、
グリッドコンテナ内の要素を行と列の組み合わせで配置できる機能です。
例えば、従来の float や flexbox では難しかった複雑なレイアウトも、grid
を使えば簡単に配置できます。
基本的な使い方
以下のコードで、グリッドレイアウトの基本を理解しましょう。
.container {
display: grid; /* グリッドレイアウトを有効化 */
grid-template-columns: 1fr 1fr 1fr; /* 3列のレイアウト */
grid-template-rows: auto auto; /* 行の高さは自動 */
gap: 10px; /* グリッドの隙間 */
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
grid-template-columns: 1fr 1fr 1fr;
→ 3列均等配置grid-template-rows: auto auto;
→ 2行の自動高さ設定gap: 10px;
→ アイテム間の余白設定
3. よく使うプロパティ
grid-template-columns / grid-template-rows
grid-template-columns: repeat(3, 1fr); /* 3列均等 */
grid-template-rows: 100px 200px auto; /* 各行の高さ指定 */
gap(grid-gap)
gap: 10px 20px; /* 行間10px、列間20px */
grid-column / grid-row(アイテムのサイズ指定)
.item1 {
grid-column: span 2; /* 2列分の幅 */
grid-row: span 2; /* 2行分の高さ */
}
justify-content / align-content(グリッド全体の配置)
justify-content: center; /* 水平方向に中央寄せ */
align-content: space-between; /* 垂直方向に均等配置 */
place-items(アイテムの配置)
place-items: center; /* アイテムを中央配置 */
実践!レスポンシブ対応のグリッド
次に、レスポンシブ対応のグリッドレイアウトを作成してみましょう。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
💡 auto-fit
+ minmax()
を使うことで、画面幅に応じてカラム数を自動調整できます!
まとめ
CSS Gridは、レイアウトを効率的に設計できる強力なツールです。
✔ display: grid;
でグリッドレイアウトを作成
✔ grid-template-columns
で列の設定
✔ grid-column / grid-row
でアイテムを自由に配置
✔ gap
や justify-content
で間隔や配置調整
✔ auto-fit
でレスポンシブ対応
Flexboxとの違いや、応用テクニックも活用すると、さらに使いこなせるようになります。
ぜひ実践して、モダンなレイアウトを作ってみてください!
CSSで作るシンプルなタイムラインデザイン
1月 30, 2025PCサイズのコーディングにおけるmax-widthの重要性
1月 8, 2025CSSのz-indexプロパティ:要素の重なり順を自在に制御
12月 8, 2024