ITコース CSS基礎 031_グリッドレイアウト Grid

グリッドレイアウト Grid

グリッドは、一連の水平線と垂直線で構成されるレイアウトモードです。グリッドを使用することで、デザイン要素を配置し、固定された位置と幅を持つ要素のページを設計し、ウェブサイトのページをより統一されたものにすることができます。

グリッドには通常、多くの列（column）と行（row）、および行と行、列と列の間のギャップがあり、このギャップは一般的に**ガター（gutter）**と呼ばれます。

例の効果

基本概念

グリッドレイアウトは以下の基本概念で構成されています：

グリッドコンテナ (grid container)：グリッドレイアウトはグリッドコンテナとグリッドアイテムで構成されます。グリッドコンテナは、グリッドアイテムをグリッドに配置するコンテナです。グリッドコンテナは任意の要素にできますが、通常はdiv要素が使用されます。
グリッドアイテム (grid item)：グリッドアイテムはグリッドコンテナに配置される要素です。グリッドアイテムは任意の要素にできますが、通常はdiv要素が使用されます。
グリッドライン (grid line)：グリッドラインはグリッドコンテナを行と列に分割する線です。グリッドラインは水平線または垂直線にできます。
グリッド列 (grid column)：グリッド列はグリッドコンテナ内の垂直方向の線です。
グリッド行 (grid row)：グリッド行はグリッドコンテナ内の水平方向の線です。

よく使用されるプロパティ

グリッドコンテナプロパティ

グリッドコンテナには、グリッドレイアウトを制御するための以下のプロパティがあります：

display：グリッドコンテナの表示モードを設定します。グリッドコンテナはdisplay: gridまたはdisplay: inline-gridに設定する必要があります。
grid-template-columns：グリッドコンテナの列数と列幅を設定します（fr、px、emなどの単位を使用）。
grid-template-rows：グリッドコンテナの行数と行高を設定します（fr、px、emなどの単位を使用）。
grid-template：grid-template-columnsとgrid-template-rowsを同時に設定します。
grid-auto-columns：グリッドコンテナの列幅を設定します。
grid-auto-rows：グリッドコンテナの行高を設定します。

グリッドアイテムプロパティ

グリッドアイテムには、グリッド内でのレイアウトを制御するための以下のプロパティがあります：

grid-column：グリッドアイテムがある列を設定します。
grid-row：グリッドアイテムがある行を設定します。
grid-column-start：グリッドアイテムの列での開始位置を設定します。
grid-column-end：グリッドアイテムの列での終了位置を設定します。
grid-row-start：グリッドアイテムの行での開始位置を設定します。
grid-row-end：グリッドアイテムの行での終了位置を設定します。
grid-area：グリッドアイテムがある領域を設定します。
grid-gap：グリッドライン間の間隔を設定します。

グリッドレイアウト

固定および自適応の列幅、行高を定義する

例：

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 100px 200px auto;
4
    /* 第1列100px、第2列200px、残りのスペースは自適応列に割り当て */
5
    grid-template-rows: 100px 200px auto;
6
    /* 第1行100px、第2行200px、残りのスペースは自適応行に割り当て */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Gridデモ</div>
3
        <div class="item">Gridデモ</div>
4
        <div class="item">Gridデモ</div>
5
        <div class="item">Gridデモ</div>
6
        <div class="item">Gridデモ</div>
7
        <div class="item">Gridデモ</div>
8
        <div class="item">Gridデモ</div>
9
        <div class="item">Gridデモ</div>
10
        <div class="item">Gridデモ</div>
11
    </div>

効果：

例の効果パーセンテージを使用して列幅、行高を定義する

例：

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 2fr 1fr;
4
    /* 第1列は30%、第2列は残りスペースの2份、第3列は残りスペースの1份 */
5
    grid-template-rows: 30% 2fr 1fr;
6
    /* 第1行は30%、第2行は残りスペースの2份、第3行は残りスペースの1份 */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Gridデモ</div>
3
        <div class="item">Gridデモ</div>
4
        <div class="item">Gridデモ</div>
5
        <div class="item">Gridデモ</div>
6
        <div class="item">Gridデモ</div>
7
        <div class="item">Gridデモ</div>
8
        <div class="item">Gridデモ</div>
9
        <div class="item">Gridデモ</div>
10
        <div class="item">Gridデモ</div>
11
    </div>

効果：

例の効果等分（均等配分）列幅、行高

例：

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* 3等分列、各列は残りスペースの1份を占める */
5
    grid-template-rows: repeat(3, 1fr);
6
    /* 3等分行、各行は残りスペースの1份を占める */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Gridデモ</div>
3
        <div class="item">Gridデモ</div>
4
        <div class="item">Gridデモ</div>
5
        <div class="item">Gridデモ</div>
6
        <div class="item">Gridデモ</div>
7
        <div class="item">Gridデモ</div>
8
        <div class="item">Gridデモ</div>
9
        <div class="item">Gridデモ</div>
10
        <div class="item">Gridデモ</div>
11
    </div>

効果：

例の効果 minmaxを使用して列、行の最小および最大幅、高さを定義する

例：

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr);
4
    /* 第1列最小幅100px、残りスペースの1份を占める；第2列最小幅200px、残りスペースの2份を占める */
5
    grid-template-rows: minmax(100px, 1fr) minmax(200px, 2fr);
6
    /* 第1行最小高100px、残りスペースの1份を占める；第2行最小高200px、残りスペースの2份を占める */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Gridデモ</div>
3
        <div class="item">Gridデモ</div>
4
        <div class="item">Gridデモ</div>
5
        <div class="item">Gridデモ</div>
6
    </div>

効果：

例の効果

グリッドギャップ

グリッドギャップはgrid-row-gapとgrid-column-gapの2つのプロパティで制御されます。また、CSS Grid Level 2ではgapプロパティが導入され、grid-row-gapとgrid-column-gapを同時に制御できます。

例：

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 30% 30%;
4
    grid-template-rows: 200px 200px;
5
    grid-row-gap: 50px; /* 行ギャップは50px */
6
    grid-column-gap: 30px; /* 列ギャップは30px */
7
    /* gap: 50px 30px; 行ギャップは50px、列ギャップは30px */
8
}
9
.item{
10
    margin: 10px;
11
    background-color: rgb(100, 150, 200);
12
}

1
    <div class="grid-example">
2
        <div class="item">Gridデモ</div>
3
        <div class="item">Gridデモ</div>
4
        <div class="item">Gridデモ</div>
5
        <div class="item">Gridデモ</div>
6
        <div class="item">Gridデモ</div>
7
        <div class="item">Gridデモ</div>
8
    </div>

効果：

例の効果

グリッドポジショニング

グリッドポジショニングは通常、grid-column、grid-row、およびgrid-areaプロパティを使用してグリッドレイアウト内のアイテムを配置することを指します。これらのプロパティは、アイテムがグリッド内で占める列と行を指定するか、アイテムがある領域を直接指定するために使用されます。

grid-columnはグリッドアイテムがまたがる列を設定するためのプロパティです。grid-column-startとgrid-column-endの省略形です。grid-columnを使用すると、グリッドアイテムの水平方向の位置とまたがる列数をより便利に定義できます。
grid-rowはグリッドアイテムがまたがる行を設定するためのプロパティです。grid-row-startとgrid-row-endの省略形です。grid-rowを使用すると、グリッドアイテムの垂直方向の位置とまたがる行数をより便利に定義できます。
grid-areaプロパティは、grid-row-start、grid-column-start、grid-row-end、およびgrid-column-endを同時に設定するための省略形プロパティです。grid-areaを使用すると、グリッドレイアウト内のグリッドアイテムの位置とサイズをより直感的に定義できます。

例：

1
.example {
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* 3列を定義、各列は1份のスペースを占める */
5
    grid-template-rows: repeat(2, 150px);
6
    /* 2行を定義、各行の高さは150px */
7
    gap: 10px;
8
    padding: 20px;
9
}
10
.item {
11
    background-color: #f2f2f2;
12
    padding: 20px;
13
    border: 1px solid #ddd;
14
    text-align: center;
15
}
16
/* grid-columnとgrid-rowを使用して配置 */
17
.item1 {
18
    grid-column: 1 / 3; /* 第1列から第3列まで（1+2列） */
19
    grid-row: 1 / 2;    /* 第1行から第2行まで（1行） */
20
}
21
/* grid-areaを使用して配置 */
22
.item2 {
23
    grid-area: 2 / 2 / 3 / 4; /* 第2行第2列から第3行第4列まで（2行）（2+3列） */
24
}

1
<div class="example">
2
    <div class="item item1">Item 1</div>
3
    <div class="item item2">Item 2</div>
4
    <div class="item">Item 3</div>
5
    <div class="item">Item 4</div>
6
    <div class="item">Item 5</div>
7
    <div class="item">Item 6</div>
8
</div>

効果：

例の効果

例：

1
body {
2
    margin: 0;
3
    padding: 0;
4
}
5

6
.container {
7
    display: grid;
8
    grid-template-columns: 1fr 2fr;
9
    /* 2列を定義、第1列は1份、第2列は2份を占める */
10
    grid-template-rows: auto;
11
    /* 行の高さを定義、第1行と第3行の高さはコンテンツによって決定、第2行は残りスペースを占める */
12
    grid-template-areas:
13
    "header header"
14
    "sidebar main"
15
    "footer footer";
16
    /* 領域レイアウトを定義、各領域は文字列で表され、スペースはセルを区切り、改行は新しい行を示す */
17
    min-height: 100vh;
18
    /* 最小高さを設定し、コンテンツの高さがビューポートより小さい場合でもfooterが見えるようにする */
19
}
20

21
.header {
22
    grid-area: header;
23
    /* .headerを"header"という名前の領域に配置 */
24
    background-color: #333;
25
    color: #fff;
26
    padding: 10px;
27
}
28

29
.sidebar {
30
    grid-area: sidebar;
31
    /* .sidebarを"sidebar"という名前の領域に配置 */
32
    background-color: #f2f2f2;
33
    padding: 10px;
34
}
35

36
.main {
37
    grid-area: main;
38
    /* .mainを"main"という名前の領域に配置 */
39
    padding: 10px;
40
}
41

42
.footer {
43
    grid-area: footer;
44
    /* .footerを"footer"という名前の領域に配置 */
45
    background-color: #333;
46
    color: #fff;
47
    padding: 10px;
48
}

1
    <div class="container">
2
        <div class="header">Header</div>
3
        <div class="sidebar">Sidebar</div>
4
        <div class="main">
5
          <h1>Main Content</h1>
6
          <p>This is the main content area.</p>
7
        </div>
8
        <div class="footer">Footer</div>
9
    </div>

効果：

例の効果

グリッドレイアウト Grid

基本概念

よく使用されるプロパティ

グリッドレイアウト

グリッドギャップ

グリッドポジショニング

コメント