CSSの基礎：グリッドレイアウト

Posted on by

CSSのグリッドレイアウト（Grid Layout）は、2次元のレイアウトを作成するための強力なツールです。
フレックスボックスが1次元のレイアウトに最適であるのに対し、
グリッドレイアウトは行と列の両方を操作することで、複雑なレイアウトを簡単に作成できます。
ここでは、display: grid; の基本と主要なプロパティについて詳しく説明します。

グリッドコンテナとグリッドアイテム

グリッドコンテナ

グリッドレイアウトを使用するには、まず親要素に display: grid; を指定して、
グリッドコンテナにします。
グリッドコンテナ内の直下の子要素がグリッドアイテムになります。

例

css

.container {
    display: grid;
}

HTML

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

グリッドアイテム

グリッドコンテナの直下の子要素がグリッドアイテムになります。
グリッドアイテムは、グリッドコンテナ内で指定された行と列に配置されます。

主なグリッドプロパティ

grid-template-columns

grid-template-columns プロパティは、グリッドコンテナの列の数と幅を指定します。
列の幅は、固定値、割合、fr 単位（フラクションユニット）で指定できます。

.container {
    display: grid;
    grid-template-columns: 100px 200px 100px; /* 3列のグリッド、各列の幅を指定 */
    /* または */
    grid-template-columns: 1fr 2fr 1fr; /* 各列の幅を割合で指定 */
}

grid-template-rows

grid-template-rows プロパティは、グリッドコンテナの行の数と高さを指定します。
行の高さは、固定値、割合、fr 単位で指定できます。

.container {
    display: grid;
    grid-template-rows: 50px 100px 50px; /* 3行のグリッド、各行の高さを指定 */
    /* または */
    grid-template-rows: 1fr 2fr 1fr; /* 各行の高さを割合で指定 */
}

gap

gap プロパティは、グリッドアイテム間のスペースを指定します。
行と列の間のスペースを同時に設定できます。

.container {
    display: grid;
    gap: 10px; /* 行と列の間のスペースを同時に設定 */
}

行間と列間を個別に設定

.container {
    display: grid;
    row-gap: 10px; /* 行間のスペース */
    column-gap: 20px; /* 列間のスペース */
}

grid-template-areas

grid-template-areas プロパティは、グリッドコンテナ内の領域を名前で指定し、
グリッドアイテムを配置するためのレイアウトテンプレートを定義します。

css

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-template-areas:
        "header header header"
        "sidebar main main";
}

.header {
    grid-area: header;
}
.sidebar {
    grid-area: sidebar;
}
.main {
    grid-area: main;
}

HTML

<div class="container">
    <div class="item header">Header</div>
    <div class="item sidebar">Sidebar</div>
    <div class="item main">Main</div>
</div>

grid-column と grid-row

grid-column と grid-row プロパティは、グリッドアイテムがグリッド内で占める範囲を指定します。

.item1 {
    grid-column: 1 / 3; /* 1列目から2列目までを占める */
    grid-row: 1 / 2; /* 1行目を占める */
}

グリッドアイテムのプロパティ

grid-area

grid-area プロパティは、グリッドアイテムの位置とサイズを一括で指定します。

.item1 {
    grid-area: 1 / 1 / 2 / 3; /* 1行目の1列目から2行目の3列目までを占める */
}

justify-self

justify-self プロパティは、グリッドアイテムを列の中で水平方向に配置します。

値

  • start：列の開始位置に揃える。
  • end：列の終了位置に揃える。
  • center：列の中央に揃える。
  • stretch：（デフォルト）：列全体に引き伸ばす。
.item {
    justify-self: center; /* または start, end, stretch */
}

align-self

align-self プロパティは、グリッドアイテムを行の中で垂直方向に配置します。

値

start：行の開始位置に揃える。

end：行の終了位置に揃える。

center：行の中央に揃える。

stretch：（デフォルト）：行全体に引き伸ばす。

.item {
    align-self: center; /* または start, end, stretch */
}

まとめ

CSSのグリッドレイアウトは、複雑な2次元レイアウトを簡単に作成できる強力なツールです。
display: grid; を使用してグリッドコンテナを作成し、grid-template-columns、
grid-template-rows、gap などのプロパティを使用してグリッドアイテムの配置を制御します。
これらのプロパティを適切に使用することで、柔軟でレスポンシブなデザインを実現できます。