7.1 プロパティjustify-items
CSS Grid Layoutは、グリッド内の要素の配置を管理するための効率的なツールを提供しているよ。プロパティの
justify-items, align-items, place-itemsを使って、グリッド要素がセルの中で水平と垂直にどのように配置されるかを正確に設定できるんだ。それぞれのプロパティについて詳しく見てみよう。
プロパティjustify-itemsは、グリッド内のすべての要素のセル内での水平な配置を決定するんだ。
シンタックス:
.grid-container {
justify-items: value;
}
どこで:
-
value: 要素の水平な配置を決定する値。可能な値は次の通り:start: 要素をセルの始まりに配置end: 要素をセルの終わりに配置center: 要素をセルの中央に配置stretch(デフォルト): 要素を伸ばしてセルの幅全体を埋める
例 1: セルの始まりに配置
この例では、すべての要素がセルの左端に揃えられるよ:
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: start; /* すべての要素がセルの始まりに揃えられる */
}
例 2: 要素の中央揃え
この例では、すべての要素がセルの中で中央に揃えられるよ:
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center; /* すべての要素がセルの中で中央に揃えられる */
}
7.2 プロパティalign-items
プロパティalign-itemsは、グリッド内のすべての要素のセル内での垂直な配置を決定するんだ。
シンタックス:
.grid-container {
align-items: value;
}
どこで:
-
value: 要素の垂直な配置を決定する値。可能な値は次の通り:start: 要素をセルの始まりに配置end: 要素をセルの終わりに配置center: 要素をセルの中で垂直に中央に配置stretch(デフォルト): 要素を伸ばしてセルの高さ全体を埋める
例 1: セルの始まりに配置
この例では、すべての要素がセルの上端に揃えられるよ:
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
align-items: start; /* すべての要素がセルの上に揃えられる */
}
例 2: 垂直に要素を中央揃え
この例では、すべての要素がセルの中で垂直に中央に揃えられるよ:
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
align-items: center; /* すべての要素がセルの中で垂直に中央に揃えられる */
}
7.3 プロパティplace-items
プロパティplace-itemsは、align-itemsとjustify-itemsの値を同時に設定するための略記記法なんだ。
シンタックス:
.grid-container {
place-items: align-value justify-value;
}
どこで:
align-value: セル内での垂直な配置の値 (align-items)justify-value: セル内での水平な配置の値 (justify-items)
もしplace-itemsに一つの値だけを指定する場合、例えばplace-items: stretch、要素は両方向に揃えられます。
例 1: 要素を垂直と水平に中央揃え
この例では、すべての要素がセルの中で垂直と水平に中央に揃えられるよ:
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
place-items: center; /* 要素が水平と垂直に中央揃えされる */
}
例 2: 垂直に伸ばして左上端に揃え
この例では、すべての要素が高さを伸ばしてセルの左上端に揃えられるよ:
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
place-items: stretch start; /* 要素が高さを伸ばしてセルの左上端に揃えられる */
}
7.4 完全な実装例
完全な実装例:
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 同じ幅の3つの列 */
grid-template-rows: repeat(3, 100px); /* 固定高さの3つの行 */
gap: 10px;
place-items: center center; /* 要素が水平と垂直に中央揃えされる */
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Gridでの要素の配置例</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: 同じ幅の3つの列と固定高さの3つの行を持つGridコンテナを作成するよ。place-itemsプロパティを使って、要素を水平と垂直に中央揃え -
.grid-item: グリッド要素の基本スタイルを定義していて、背景色、文字色、パディング、 文字の中央揃え、境界線などを設定
GO TO FULL VERSION