display: grid; の使い方を徹底解説!CSSグリッドレイアウトの基本と応用

Webデザインにおいてレイアウトを効率的に組むために「CSS Grid Layout」は非常に便利な技術です。
display: grid; を使えば、複雑なレイアウトも簡潔に実装できます。

この記事では、CSS Gridの基本から応用テクニックまで、初心者でも理解しやすいように詳しく解説します。

display: grid; とは?

display: grid; は、CSSのレイアウト手法の一つで、
グリッドコンテナ内の要素を行と列の組み合わせで配置できる機能です。

例えば、従来の floatflexbox では難しかった複雑なレイアウトも、
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 でアイテムを自由に配置
gapjustify-content で間隔や配置調整
auto-fit でレスポンシブ対応

Flexboxとの違いや、応用テクニックも活用すると、さらに使いこなせるようになります。
ぜひ実践して、モダンなレイアウトを作ってみてください!