6.1 grid-gapプロパティ
CSS Grid Layoutは、グリッド要素間のスペースを管理するための柔軟なツールを提供しています。プロパティ
grid-gap、grid-row-gap、grid-column-gapは、行と列の間の距離を簡単に指定できるようになり、整然としたレイアウトを作成するのに役立ちます。これらのプロパティをさらに詳しく見てみましょう。
grid-gapプロパティ（短縮形でgap）は、グリッド内の行と列の間の全体的な距離を定義します。
このプロパティは、grid-row-gapとgrid-column-gapの短縮形です。
シンタックス：
.grid-container {
grid-gap: value;
}
ここで：
-
value: 行と列の間のギャップの値。さまざまな単位（px、%、fr、autoなど）で指定できます。
例 1: 行と列に対して共通の値を指定
この例では、20pxのギャップが行と列の両方に適用されます:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 20px; /* 行と列の間のすべてのギャップに20pxを適用 */
}
例 2: 行と列で異なる値を指定
この例では、行に対して10px、列に対して20pxの2つの値を使用します:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px 20px; /* 行と列の間にそれぞれ10pxと20pxを適用 */
}
6.2 grid-row-gapプロパティ
grid-row-gapプロパティは、グリッド内の行間の距離を定義します。列に関係なく、行間のスペースに対して個別の値を設定できます。
シンタックス：
.grid-container {
grid-row-gap: value;
}
ここで：
value: 行間のギャップの値。さまざまな単位で指定可能
例 1: 行間に固定ギャップを設定
この例では、行間の距離が15pxになります:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 15px; /* 行間に15pxのスペースを設定 */
}
例 2: パーセンテージを使ってギャップを設定
この例では、行間の距離が行の高さの5%になります:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 5%; /* 行の高さの5%のスペースを設定 */
}
6.3 grid-column-gapプロパティ
grid-column-gapプロパティは、グリッド内の列間の距離を定義します。行に関係なく、列間のスペースに対して個別の値を設定できます。
シンタックス：
.grid-container {
grid-column-gap: value;
}
ここで：
value: 列間のギャップの値。さまざまな単位で指定可能
例 1: 列間に固定ギャップを設定
この例では、列間の距離が25pxになります:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 25px; /* 列間に25pxのスペースを設定 */
}
例 2: emを使ってギャップを設定
この例では、列間の距離が2emになります:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 2em; /* 列間に2emのスペースを設定 */
}
6.4 grid-row-gapとgrid-column-gapの組み合わせの使用
grid-row-gapとgrid-column-gapのプロパティを組み合わせて、行と列の間のスペースをより正確に管理できます。
完全な実装例:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 同じ幅の三つの列 */
grid-template-rows: repeat(3, 100px); /* 固定高さの三つの行 */
grid-row-gap: 15px; /* 行間に15pxのスペースを設定 */
grid-column-gap: 25px; /* 列間に25pxのスペースを設定 */
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid-gap, grid-row-gap, grid-column-gapの使用例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">アイテム 1</div>
<div class="grid-item item2">アイテム 2</div>
<div class="grid-item item3">アイテム 3</div>
<div class="grid-item item4">アイテム 4</div>
<div class="grid-item item5">アイテム 5</div>
<div class="grid-item item6">アイテム 6</div>
</div>
</body>
</html>
コードの説明:
-
.grid-container: 幅が同じ三つの列と固定高さの三つの行を持つGridコンテナを作成します。grid-row-gapとgrid-column-gapのプロパティを使って、行と列の間のギャップを設定します。 -
.grid-item: 背景色、テキストの色、パディング、テキストの中央揃え、境界線などの基本スタイルをグリッド要素に定義します。
GO TO FULL VERSION