フレックスボックスとグリッド、カラムレイアウトの比較
この記事ではフレックスボックスとグリッド、カラムレイアウトの比較について説明します。
フレックスボックスとグリッド、カラムレイアウトを比較し、それぞれの使い所を学べます。
YouTube Video
プレビュー用のHTML
css-layout-comparision.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-layout-comparision.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15 <!-- Main content -->
16 <main>
17 <header>
18 <h2>Layout Comparision</h2>
19 </header>
20 <article>
21 <h3>flex</h3>
22 <section>
23 <section class="sample-view">
24 <div class="flex-container">
25 <div class="flex-item">Item 1</div>
26 <div class="flex-item">Item 2</div>
27 <div class="flex-item">Item 3</div>
28 <div class="flex-item">Item 4</div>
29 <div class="flex-item">Item 5</div>
30 <div class="flex-item">Item 6</div>
31 <div class="flex-item">Item 7</div>
32 <div class="flex-item">Item 8</div>
33 <div class="flex-item">Item 9</div>
34 </div>
35 </section>
36 </section>
37 </article>
38 <article>
39 <h3>grid</h3>
40 <section>
41 <section class="sample-view">
42 <div class="grid-box">
43 <div class="grid-item item1">Item 1</div>
44 <div class="grid-item item2">Item 2</div>
45 <div class="grid-item item3">Item 3</div>
46 <div class="grid-item item4">Item 4</div>
47 <div class="grid-item item5">Item 5</div>
48 <div class="grid-item item6">Item 6</div>
49 <div class="grid-item item7">Item 7</div>
50 <div class="grid-item item8">Item 8</div>
51 <div class="grid-item item9">Item 9</div>
52 </div>
53 </section>
54 </section>
55 </article>
56 <article>
57 <h3>column</h3>
58 <section>
59 <section class="sample-view">
60 <section class="columns-container">
61 <p class="columns-item">Item 1</p>
62 <p class="columns-item">Item 2</p>
63 <p class="columns-item">Item 3</p>
64 <p class="columns-item">Item 4</p>
65 <p class="columns-item">Item 5</p>
66 <p class="columns-item">Item 6</p>
67 <p class="columns-item">Item 7</p>
68 <p class="columns-item">Item 8</p>
69 <p class="columns-item">Item 9</p>
70 </section>
71 </section>
72 </section>
73 </article>
74 </main>
75</body>
76</html>フレックスボックス、グリッド、カラムレイアウトの比較
CSS の flex、grid、columns は、いずれも 要素を整列やレイアウト するための手法ですが、それぞれに得意な用途や特性があります。以下に比較しながら違いをわかりやすく説明します。
Flexbox（display: flex）
1.flex-container {
2 display: flex;
3 justify-content: space-between;
4 align-items: center;
5 flex-wrap: wrap;
6 background-color: lightblue;
7 height: 200px;
8}
9
10.flex-item {
11 background-color: lightskyblue;
12 padding: 10px;
13 margin: 5px;
14 width: 70px;
15 height: auto;
16}特徴
- 横か縦の1方向のレイアウトに適しています。
- 要素の並び順や伸縮を柔軟に制御できます
- ナビゲーションバー、ボタン群など、主に小規模なレイアウトに向いています。
利点
- 子要素のサイズを自動調整できます。
flex-directionプロパティやflex-wrapプロパティ、orderプロパティを用いて順番を変更できます。
表示順序の変更例
flex-direction
表示順序を変更する例として、flex-directionプロパティにcolumnを設定してみます。
1.flex-container {
2 flex-direction: column;
3}flex-directionにcolumnを設定すると、アイテムの表示順序が横並びから縦並びに変わります。左から右への並び方から、上から下への並び方になります。
flex-wrap
flex-wrapプロパティにwrap-reverseを設定すると、折り返された行の順序が通常とは逆になります。
1.flex-container {
2 flex-direction: row;
3 flex-wrap: wrap-reverse;
4}このように下から上へと行が積み上がるように表示されます。
1.flex-container {
2 flex-direction: column;
3 flex-wrap: wrap-reverse;
4}flex-direction に column を設定し、かつ flex-wrap に wrap-reverse を指定すると、アイテムは縦方向に並びながら、列が右から左に折り返されるようになります。この例のように、列の順序が通常の左から右とは逆になり、右から左に追加されていきます。
Grid（display: grid）
1.grid-box {
2 display: grid;
3 grid-template-columns: 100px 100px 100px;
4 grid-template-rows: 50px 50px 50px;
5 gap: 20px;
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}特徴
- 2次元のレイアウトに適しています。
- マス目状のレイアウト全体を明確に定義できます。
- より複雑なデザインや全体的なページ構造に向いています。
利点
- 行と列を同時に定義できます。
- 名前付きの領域（
grid-area）でセクションごとに配置できます。 - 子要素を任意のグリッド位置に配置できるため、順序を柔軟にコントロール可能です。
表示順序の変更例
表示順序を変更する例として、grid-template-areasプロパティを用いて、表示位置を設定してみます。
1.grid-box {
2 grid-template-areas:
3 "item1 item4 item5"
4 "item2 item6 item7"
5 "item3 item8 item9";
6}
7
8.item1 { grid-area: item1; }
9.item2 { grid-area: item2; }
10.item3 { grid-area: item3; }
11.item4 { grid-area: item4; }
12.item5 { grid-area: item5; }
13.item6 { grid-area: item6; }
14.item7 { grid-area: item7; }
15.item8 { grid-area: item8; }
16.item9 { grid-area: item9; }この例では、grid-template-areas プロパティを使って、グリッド全体のレイアウトを視覚的に定義し、各セルに対応するエリア名を設定しています。そして、子要素にはそれぞれ対応する grid-area 名を指定することで、要素を任意の位置に配置しています。このように grid を使えば、要素の表示順を自由に変えるだけでなく、複雑でユニークなレイアウトも簡単に実現できます。
Columns（column-count, column-width）
1.columns-container {
2 background-color: lightblue;
3 columns: 100px 3;
4 column-gap: 20px;
5 column-rule: 2px solid #333;
6 padding: 10px;
7}
8
9.columns-item {
10 background-color: lightskyblue;
11 text-align: center;
12 margin: 20px auto;
13 color: white;
14 display: flex;
15 align-items: center;
16 justify-content: center;
17 font-size: 1.2rem;
18 border: 1px solid #ccc;
19 height: 50px;
20}特徴
- 雑誌のような段組みを簡単に作成できます。
- テキストコンテンツの流し込みに最適です。
- 子要素の順序は HTML の流れに従うため、順番の制御には不向きです。
利点
- 長文テキストを自動で分割できます。
- 非常に簡単に新聞のようなレイアウトが作れます。
比較表
| 特徴/用途 | Flexbox | Grid | Columns |
|---|---|---|---|
| レイアウト次元 | 1次元（横 or 縦） | 2次元（横 & 縦） | 1次元（縦） |
| 向いているもの | 部品配置・整列 | ページ全体の構造 | テキスト段組み |
| 配置の柔軟性 | 高い（順序やサイズ） | 非常に高い（領域指定） | 低い（自動分割のみ） |
| 子要素の制御 | 柔軟に可 | 明確に定義可能 | 制御しにくい |
| レイアウトの意図 | コンテンツ主導 | レイアウト主導 | テキスト主導 |
まとめ
- Flexboxは、ヘッダーやカードリストなど要素を一列に整列したいときに適しています。
- Gridは、ウェブページの枠組みなどレイアウト全体を設計したいときに適しています。
- Columnsは、記事やブログなどテキストを段組みにしたいときに適しています。
必要に応じてそれぞれを組み合わせて使うことも可能です。例えば、Gridで全体を設計し、Flexで内部の要素を整列させるといった使い方もできます。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。