グリッドレイアウト関連のCSSプロパティ
この記事ではグリッドレイアウト関連のCSSプロパティについて説明します。
グリッドとインライングリッドの記述の仕方を学べます。
YouTube Video
プレビュー用のHTML
css-grid.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-grid.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>grid</h3>
23 <section style="width: 100%; height: 350px;">
24 <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
25 <section class="sample-view">
26 <div class="grid-box">
27 <div class="grid-item">Item 1</div>
28 <div class="grid-item">Item 2</div>
29 <div class="grid-item">Item 3</div>
30 <div class="grid-item">Item 4</div>
31 <div class="grid-item">Item 5</div>
32 <div class="grid-item">Item 6</div>
33 </div>
34 </section>
35 </section>
36 <section style="width: 100%; height: 550px;">
37 <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
38 <section class="sample-view">
39 <div class="grid-container" style="color: #666;">
40 <header class="grid-header">Header</header>
41 <aside class="grid-sidebar">Sidebar</aside>
42 <article class="grid-content">
43 <p>Content</p>
44 </article>
45 <aside class="grid-ads">Ads</aside>
46 <footer class="grid-footer">Footer</footer>
47 </div>
48 </section>
49 </section>
50 </article>
51 <article>
52 <h3>gap</h3>
53 <section style="height: 300px;">
54 <header><h4>display: grid; gap: 30px 10px;</h4></header>
55 <section class="sample-view">
56 <div class="gap-grid-container">
57 <div>Item 1</div>
58 <div>Item 2</div>
59 <div>Item 3</div>
60 <div>Item 4</div>
61 <div>Item 5</div>
62 <div>Item 6</div>
63 </div>
64 </section>
65 </section>
66 <section>
67 <header><h4>display: flex; gap: 50px;</h4></header>
68 <section class="sample-view">
69 <div class="gap-flex-container">
70 <div>Item 1</div>
71 <div>Item 2</div>
72 <div>Item 3</div>
73 </div>
74 </section>
75 </section>
76 </article>
77 <article>
78 <h3>grid-template-areas</h3>
79 <section style="height: 350px;">
80 <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
81 <section class="sample-view">
82 <div class="grid-template-areas-container">
83 <div class="grid-template-areas-header">Header</div>
84 <div class="grid-template-areas-sidebar">Sidebar</div>
85 <div class="grid-template-areas-content">Content</div>
86 <div class="grid-template-areas-footer">Footer</div>
87 </div>
88 </section>
89 </section>
90 </article>
91 <article>
92 <h3>inline-grid</h3>
93 <section>
94 <header><h4>display: inline-grid</h4></header>
95 <section class="sample-view">
96 Here is an inline grid:
97 <span class="inline-grid-container">
98 <div class="inline-grid-item">1</div>
99 <div class="inline-grid-item">2</div>
100 <div class="inline-grid-item">3</div>
101 <div class="inline-grid-item">4</div>
102 </span>
103 This is contained within a paragraph.
104 </section>
105 </section>
106 </article>
107 </main>
108</body>
109</html>グリッドレイアウト
grid
1.grid-box {
2 display: grid;
3 grid-template-columns: 100px 200px auto;
4 grid-template-rows: 100px auto 50px;
5 gap: 10px;
6 background-color: lightblue;
7 border: none;
8 height: 200px;
9}
10
11.grid-item {
12 background-color: lightskyblue;
13 width: 100%;
14 padding: 0;
15 text-align: center;
16 border: 2px solid black;
17}グリッドは、要素を2次元の行と列で整列させるためのレイアウトシステムです。グリッドを使うと、従来のfloatやpositionなどでは難しかった複雑なレイアウトを、簡単かつ柔軟に構築することができます。フレックスボックスが1次元のレイアウトに強いのに対し、グリッドは2次元のレイアウトに適しています。
grid-boxクラスで、displayプロパティにgridを指定し、グリッドレイアウトを適用しています。この要素はグリッドコンテナと呼ばれます。grid-template-columnsプロパティによって、グリッドの列幅を指定します。この例では、最初の列が100px、2列目が200px、3列目が残りのスペース（auto）となります。grid-template-rowsプロパティによって、グリッドの行の高さを指定します。最初の行は100px、2行目は自動（auto）、3行目は50pxの高さになります。gapプロパティによって、グリッドアイテム同士の間隔を設定します。列と行の間に 10pxのスペースを追加しています。
基本的な用語
- グリッドコンテナは
displayプロパティにgridを設定した要素で、子要素がグリッドアイテムになります。 - グリッドアイテムはグリッドコンテナの直下に配置される子要素です。
グリッドの主要なプロパティ
grid-template-columns & grid-template-rows
1.container {
2 grid-template-columns: 1fr 2fr 1fr;
3}grid-template-columnsとgrid-template-rowsプロパティはそれぞれの列と行のサイズを定義します。- 単位には
pxや%の他、残りスペースの割合を指定できるfr（fraction）を使うこともできます。- この例では、3つの列があり、2列目は他の列の2倍の幅になります。
grid-column & grid-row
1.container {
2 display: grid;
3 grid-template-columns: repeat(4, 1fr); /* 4 columns */
4 grid-template-rows: repeat(3, 100px); /* 3 rows */
5}
6.item {
7 grid-column: 2 / 4;
8 grid-row: 1 / 3;
9}
10/* Grid line number (3 rows & 4 columns)
11 1 2 3 4 5
121 +---+---+---+---+
13 | | o | o | |
142 +---+---+---+---+
15 | | o | o | |
163 +---+---+---+---+
17 | | | | |
184 +---+---+---+---+
19*/-
grid-columnとgrid-rowは、グリッドアイテムをどの位置に配置するかを指定するプロパティです。セルの番号ではなく、グリッド線を基準に番号を指定します。- この例では、アイテムは「2番目の縦線から4番目の縦線まで」「1番目の横線から3番目の横線まで」の範囲に配置されます。つまり、2列目と3列目、1行目と2行目のセルを占有します。
-
ここで、グリッド線とは、グリッドコンテナ内の行や列を区切るための「線」を指します。グリッド線には1から始まる番号が自動的に付けられ、行・列の境界として使われます。
- たとえば、4列のグリッドには1から5までの5本の縦方向のグリッド線が存在し、それぞれのセルはこれらの線に挟まれた領域に配置されます。
grid-auto-rows & grid-auto-columns
1.container {
2 display: grid;
3 grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
4 grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
5 grid-auto-rows: 150px; /* Automatically added rows will be 150px */
6 grid-auto-columns: 100px; /* Automatically added columns will be 100px */
7}
8
9.item {
10 grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11 grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}grid-auto-rowsとgrid-auto-columnsは、グリッドレイアウトで、明示的に定義されていないグリッドの行や列が自動的に生成された場合に、そのサイズを制御するプロパティです。- この例では、2行と2列を明示的に定義していますが、それ以上に要素が追加された場合、
grid-auto-rowsとgrid-auto-columnsに従って新しい行や列が自動生成されます。
- この例では、2行と2列を明示的に定義していますが、それ以上に要素が追加された場合、
justify-items & align-items
1.container {
2 justify-items: center; /* Center items horizontally */
3 align-items: center; /* Center items vertically */
4}- グリッドアイテムを水平方向（
justify-items）および垂直方向（align-items）に整列させます。
grid-area
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5 grid-area: 1 / 2 / 3 / 4;
6}grid-areaは、グリッドアイテムをどの位置に配置するかを行・列の範囲を一括で指定できるプロパティです。指定はセルではなく、**グリッド線（ライン）**の番号を使って行います。- この例では、アイテムは「1番目の横線から3番目の横線まで」、および「2番目の縦線から4番目の縦線まで」に配置されます。つまり、1行目と2行目、2列目と3列目のセル範囲を占有します。
gap
1.container {
2 gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}gapは、列や行の間にスペースを追加します。column-gapやrow-gapで、列や行のスペースを個別に指定することもできます。
grid-auto-flow
1.container {
2 grid-auto-flow: column; /* Add items in the column direction */
3}grid-auto-flowはアイテムが配置される方向を設定するプロパティで、行か列のどちらかを指定します。
複雑なレイアウトの例
1.grid-container {
2 display: grid;
3 grid-template-columns: 120px 1fr 80px;
4 grid-template-rows: 50px 1fr 50px;
5 gap: 10px;
6 background-color: transparent;
7 border: none;
8 height: 400px;
9}
10.grid-header {
11 grid-column: 1 / 4;
12 background-color: lightblue;
13}
14.grid-sidebar {
15 grid-column: 1 / 2;
16 grid-row: 2 / 3;
17 height: 100%;
18 background-color: lightslategray;
19 color: white;
20}
21.grid-content {
22 grid-column: 2 / 3;
23 grid-row: 2 / 3;
24 background-color: lightskyblue;
25}
26.grid-content p {
27 margin: 0;
28 padding: 0;
29 height: 260px;
30}
31.grid-ads {
32 grid-column: 3 / 4;
33 grid-row: 2 / 3;
34 height: 100%;
35 background-color: lightsteelblue;
36}
37.grid-footer {
38 grid-column: 1 / 4;
39 background-color: lightgray;
40}このようにグリッドは、ウェブページ全体のレイアウトもシンプルなコードで作成できます。
- この例では、サイドバー、メインコンテンツ、広告の3つの列と、ヘッダー、コンテンツ、フッターの3つの行があります。
- ヘッダーとフッターはページ全体の幅を占め、中央にコンテンツ、両サイドにサイドバーと広告が表示されます。
グリッドの利点
グリッドの利点として次の点があります。
- 2次元のレイアウトが簡単: 行と列の両方でレイアウトを管理できるため、複雑なレイアウトでも少ないコードで実現可能です。
- レスポンシブデザインとの相性が良い: グリッドシステムは、異なる画面サイズに対応するレスポンシブデザインの作成を簡単にします。
gapプロパティ
1.gap-grid-container {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4 gap: 30px 10px;
5 background-color: transparent;
6 border: none;
7 height: 200px;
8}
9
10.gap-grid-container div {
11 width: 100px;
12 background-color: lightskyblue;
13}
14
15.gap-flex-container {
16 display: flex;
17 gap: 50px;
18}
19
20.gap-flex-container div {
21 width: 80px;
22 background-color: lightgreen;
23}gap プロパティは、グリッドレイアウトやフレックスボックスレイアウトで、要素間の隙間（スペース）を設定するために使用されます。このプロパティを使うことで、子要素同士の間に余白を簡単に配置できます。
gap-grid-containerクラスでは、各要素の間に上下に30px、左右に10pxの隙間が設定されます。grid-template-columnsで3列のグリッドを作成しているため、各要素の上下と左右に隙間が適用されます。gap-flex-containerクラスでは、フレックスボックスの3つのアイテムの間に50pxの隙間が適用されます。
基本構文
1.container {
2 display: grid; /* or flex */
3 gap: <row-gap> <column-gap>;
4}row-gapには、行の間の隙間を指定します。これはグリッドやフレックスレイアウトの縦方向の間隔です。column-gapには、列の間の隙間を指定します。これは横方向の間隔です。
2つの値を指定しない場合、1つの値がrow-gapとcolumn-gapの両方に適用されます。
gapプロパティの利点
gapプロパティの利点として次の点があります。
- シンプルな隙間設定: 子要素間の隙間を設定するためのコードが簡単になり、要素間に余分なマージンやパディングを設定する必要がなくなります。
- 柔軟な対応: レスポンシブデザインにも対応しやすく、デザインを柔軟に調整できます。
grid-template-areasプロパティ
1.grid-template-areas-container {
2 display: grid;
3 grid-template-columns: 1fr 2fr; /* 2 columns */
4 grid-template-rows: auto auto; /* 2 rows */
5 grid-template-areas:
6 "header header"
7 "sidebar content"
8 "footer footer"; /* In the 3rd row, the footer spans across */
9 gap: 10px;
10 height: 250px;
11}
12.grid-template-areas-container div {
13 width: 100%;
14 height: 100%;
15}
16.grid-template-areas-header {
17 grid-area: header; /* Placed in the "header" area */
18 background-color: lightblue;
19}
20.grid-template-areas-sidebar {
21 grid-area: sidebar; /* Placed in the "sidebar" area */
22 background-color: lightslategray;
23}
24.grid-template-areas-content {
25 grid-area: content; /* Placed in the "content" area */
26 background-color: lightskyblue;
27}
28.grid-template-areas-footer {
29 grid-area: footer; /* Placed in the "footer" area */
30 background-color: lightsteelblue;
31}grid-template-areasプロパティは、グリッドコンテナ内の領域に名前を付け、それを使ってグリッド要素を簡単に配置するための方法を提供します。このプロパティを使うことで、視覚的にわかりやすいレイアウト定義が可能になります。
grid-template-areasプロパティで名前を指定した位置の要素には、grid-areaプロパティで同じ名前を付けます。要素が複数のセルにまたがる場合でも、自動的に正しい位置に配置されます。
この例では、次のようにグリッドを作成しています。
- 1行目に "header"を2列にわたって配置しています。
- 2行目の左側に"sidebar"、右側に"content"を配置しています。
- 3行目に"footer"を2列にわたって配置しています。
基本的な使い方
1grid-template-areas:
2 "area1 area2 area3"
3 "area1 area4 area5";grid-template-areasプロパティでは、各行ごとに領域（エリア）の名前を指定します。名前を割り当てた領域に、要素を配置することで、簡単にレイアウトを作成できます。
- この例では、2行3列のグリッドを作成し、各セルにarea1、area2などの名前を付けています。
. を使用した空のセルの定義
1grid-template-areas:
2 "header header header"
3 "sidebar . content"
4 "footer footer footer";レイアウト内に空のセルを設けたい場合、.(ドット)を使って空白セルを表現することができます。
- この例のように、sidebarとcontentの間に.を指定することで、2列目が空白になります。
grid-template-areasプロパティの利点
grid-template-areasプロパティの利点として次の点があります。
- 視覚的なレイアウト: レイアウトを視覚的に表現でき、デザインを理解しやすくします。
- 要素の移動が容易: HTMLを変更せずに、CSS内のエリア定義を変更することで要素のレイアウトを簡単に調整できます。
注意点
grid-template-areasプロパティを利用する際には、以下の点に注意が必要です。
- 各行内の名前の数は、定義した列数と一致している必要があります。
- 同じ名前を複数のセルに割り当てると、それらのセルが結合されます。
- 異なる行・列に同じ名前を割り当てる場合は、その領域が長方形である必要があります。
inline-grid
1.inline-grid-container {
2 display: inline-grid;
3 grid-template-columns: 1fr 1fr;
4 gap: 5px;
5 background-color: lightblue;
6}
7.inline-grid-item {
8 background-color: lightskyblue;
9 width: 50px;
10 padding: 0;
11 margin: 0;
12}inline-gridは、CSSのdisplayプロパティの1つの値です。このプロパティを適用すると、要素はインラインレベルのコンテナとして振る舞い、内部でグリッドフォーマットコンテキストを作成します。display: gridと異なり、ドキュメントのフローにおいてインライン要素として振る舞います。
inline-gridのユースケース
inline-gridはgridほど一般的ではありませんが、特定のシナリオで有効に活用できます。
-
インラインコンテキスト内でのグリッド：テキストコンテンツ内や他のインライン要素と並べてグリッドを配置したい場合に便利です。たとえば、ボタンやバッジ、ラベルなどでグリッド構造が必要でも、テキストフローを崩さずにインラインで表示したい場合に役立ちます。
-
インライン要素内のレイアウト制御：リンクやボタン、スパンなどのインライン要素内で複雑なレイアウトが必要でも、インラインのままにしたい場合、
inline-gridは内部構造をグリッドレイアウトで管理しながらブロック表示を避けることができます。
1<button class="inline-grid">
2 <span>Icon</span>
3 <span>Text</span>
4</button>この場合、ボタンはアイコンとテキストをグリッドで表示しつつ、ドキュメントフローではインラインのままです。
- レスポンシブなインラインコンポーネント：インラインコンテンツの一部でありながら、グリッドレイアウトが必要な小さなコンポーネントに
inline-gridを使用できます。例えば、インラインフォームやバッジ、商品ラベルなど、グリッドでレイアウトを調整しつつインラインで保持したい場合に適しています。
inline-gridの整列とサイズ調整
1.inline-grid {
2 display: inline-grid;
3 vertical-align: middle;
4}- 他のインライン要素と同様に、
inline-gridは周囲のコンテンツに対して縦方向の整列を尊重します。vertical-alignプロパティを使用して、グリッドの整列を制御できます。
1.inline-grid {
2 display: inline-grid;
3 width: 200px;
4 height: 100px;
5}- サイズに関して、
inline-grid要素はそのグリッドコンテンツが必要とする幅だけを占有します。必要に応じて、明示的に幅や高さ、最小・最大寸法を設定することも可能です。
1.inline-grid {
2 display: inline-grid;
3 grid-template-columns: auto 1fr;
4}また、グリッドのレイアウト自体がinline-gridコンテナのサイズを決定することも可能で、特にfr、auto、パーセンテージなどの柔軟な単位を使用する場合はその傾向が強くなります。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。