5.1 プロパティ grid-auto-rows
CSS Grid Layoutは、グリッド内の要素を自動配置するための素晴らしいツールを提供してるよ。
grid-auto-rows, grid-auto-columns と grid-auto-flow のプロパティは、グリッドに明示的に配置されていない要素の挙動を管理するのに役立つんだ。これらのプロパティについて詳しく見ていこう。
grid-auto-rows プロパティは、要素が明示的に指定された行を超えたときに、自動的に追加される行の高さを決定するよ。
構文:
.grid-container {
grid-auto-rows: value;
}
この場合:
-
value: 自動的に追加される行の高さ。いろいろな単位で指定できるよ (px,%,fr,autoなど)
例 1: 固定行の高さ
この例では、自動的に追加されるすべての行が固定の高さ 100px を持つよ:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3つの等しい幅の列 */
grid-auto-rows: 100px; /* 自動的に追加される行は高さ100px */
}
例 2: 柔軟な行の高さ
この例では、自動的に追加される行は最小の高さ 100px を持ち、必要に応じて増加するよ:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto); /* 行の最小高さは100pxで、自動で増加可 */
}
5.2 プロパティ grid-auto-columns
grid-auto-columns プロパティは、要素が明示的に指定された列を超えたときに、自動的に追加される列の幅を決定するよ。
構文:
.grid-container {
grid-auto-columns: value;
}
この場合:
-
value: 自動的に追加される列の幅。いろいろな単位で指定できるよ (px,%,fr,autoなど)
例 1: 固定列の幅
この例では、自動的に追加されるすべての列が固定の幅 100px を持つよ:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px); /* 3つの固定高さの行 */
grid-auto-columns: 100px; /* 自動的に追加される列は幅100px */
}
例 2: 柔軟な列の幅
この例では、自動的に追加される列は最小の幅 100px を持ち、自由スペースの一部まで増加することができるんだ:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-auto-columns: minmax(100px, 1fr); /* 列の最小幅は100pxで、自由スペースの一部まで増加可 */
}
5.3 プロパティ grid-auto-flow
grid-auto-flow プロパティは、grid-row や grid-column で明示的に指定されていない要素を、どのようにグリッド内へ自動配置するかを決定するよ。
構文:
.grid-container {
grid-auto-flow: value;
}
この場合:
value: 要素の配置順序を決定する値。可能な値は:
row(デフォルト): 要素は行ごとに配置されるcolumn: 要素は列ごとに配置されるdense: 詰め込み配置、空のセルを残さない（rowまたはcolumnと一緒に使われる）
例 1: 行ごとの配置
この例では、要素は行ごとに配置され、一つずつ行を埋めるよ:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row; /* 要素は行ごとに配置される */
}
例 2: 列ごとの配置
この例では、要素は列ごとに配置され、一つずつ列を埋めるよ:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: column; /* 要素は列ごとに配置される */
}
例 3: 詰め込み配置
この例では、要素は詰め込み配置され、空のセルを最小化するよ:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row dense; /* 詰め込み配置で要素を行ごとに配置 */
}
5.4 フル実装の例
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3つの等しい幅の列 */
grid-auto-rows: 100px; /* 自動的に追加される行は高さ100px */
grid-auto-flow: row dense; /* 詰め込み配置で要素を行ごとに配置 */
gap: 10px;
}
.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>CSS Gridでの自動配置例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">アイテム1</div>
<div class="grid-item">アイテム2</div>
<div class="grid-item">アイテム3</div>
<div class="grid-item">アイテム4</div>
<div class="grid-item">アイテム5</div>
<div class="grid-item">アイテム6</div>
</div>
</body>
</html>
コードの説明:
-
.grid-container: 同じ幅の3つの列と高さ100pxの自動行を持つGridコンテナを作成するよ。 要素は詰め込み配置で行ごとに配置される -
.grid-item: グリッドアイテムの基本スタイルを定義するよ、背景色やテキストの色、余白、テキストセンタリング、ボーダーなんかが含まれる
GO TO FULL VERSION