8.1 プロパティ justify-content
CSS Grid Layoutは、利用可能なスペース内でグリッド全体のコンテナを整列させる強力なツールを提供しているんだ。justify-content、align-content、place-contentの各プロパティは、コンテナ内の行と列の整列をコントロールできて、レイアウト作成の際に柔軟性と正確さをもたらすよ。
justify-contentプロパティは、コンテナ内で全体のグリッドを水平に整列させるんだ。このプロパティは、コンテナのサイズがグリッド自体の必要な幅よりも大きい場合に役立つよ。
構文:
.grid-container {
display: grid;
justify-content: value;
}
ここで、valueは以下の値を取ることができるよ:
start: グリッドをコンテナの始まりに整列させるend: グリッドをコンテナの終わりに整列させるcenter: グリッドをコンテナの中央に整列させるstretch: グリッドを伸ばして全コンテナを埋めるspace-around: 各要素の周りに均等なスペースを配置するspace-between: 要素間に均等なスペースを配置するspace-evenly: 要素とコンテナの端の間に均等なスペースを配置する
例1: コンテナの始まりに整列
この例では、全てのコンテンツがコンテナの左端に整列されるよ:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
justify-content: start; /* コンテナの左端にコンテンツを整列させる */
}
例2: コンテンツを中央に配置
この例では、全てのコンテンツがコンテナ内で中央に配置されるよ:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
justify-content: center; /* コンテナ内でコンテンツを中央に配置する */
}
8.2 プロパティ align-content
align-contentプロパティは、gridコンテナ内でグリッドのコンテンツを縦方向に整列させるんだ。これは、グリッドが全ての利用可能な縦のスペースを埋めていない時に役立つよ。
構文:
.grid-container {
align-content: value;
}
ここで、valueはコンテンツの縦の整列を決定する値だよ。可能な値は:
start: コンテンツをコンテナの始まりに整列させるend: コンテンツをコンテナの終わりに整列させるcenter: コンテンツをコンテナ内で中央に配置するspace-between: 要素間に均等なスペースを配置するspace-around: 各要素の周りに均等なスペースを配置するspace-evenly: 要素とコンテナの端の間に均等なスペースを配置するstretch(デフォルト): コンテンツを伸ばして全ての利用可能なスペースを埋める
例1: コンテナの始まりに整列
この例では、全てのコンテンツがコンテナの上部に整列されるよ:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
align-content: start; /* コンテナの上部にコンテンツを整列させる */
}
例2: コンテンツを中央に配置
この例では、全てのコンテンツがコンテナ内で中央に配置されるよ:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
align-content: center; /* コンテナ内でコンテンツを中央に配置する */
}
8.3 プロパティ place-content
place-contentプロパティは、justify-contentとalign-contentの値を同時に設定するためのショートハンド表記だよ。
構文:
.grid-container {
place-content: justify-value align-value;
}
ここで:
justify-value: 水平整列の値 (justify-content)align-value: 垂直整列の値 (align-content)
例1: 水平および垂直の中央にコンテンツを配置
この例では、全てのコンテンツがコンテナ内で水平および垂直に中央に配置されるよ:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
place-content: center center; /* 水平および垂直にコンテンツを中央に配置する */
}
例2: 幅に沿ってコンテンツを伸ばし、上端に整列
この例では、コンテンツはコンテナの幅に沿って伸び、上端に整列されるよ:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
place-content: stretch start; /* 幅に沿ってコンテンツを伸ばし、上端に整列させる */
}
8.4 完全な実装例
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px); /* 固定幅の3列 */
grid-template-rows: repeat(3, 100px); /* 固定高さの3行 */
gap: 10px;
place-content: center center; /* 水平および垂直にコンテンツを中央に配置 */
}
.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コンテナの整列例</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-contentプロパティを使用して、水平方向と垂直方向でコンテンツを中央に配置しているよ -
.grid-item: グリッド要素の基本スタイルを定義するよ。背景色、テキストの色、パディング、テキスト整列、ボーダーなどだよ
GO TO FULL VERSION