C-13. グリッドの設定

2021.12.30

グリッドレイアウトを理解しておこう

列と行を定義する水平線と垂直線の集合が交差したものです。要素をグリッド上の行と列の中に配置することができます。

grid

列と行を定義する水平線と垂直線（グリッドライン）が交差した格子状のもので、要素をグリッド上の行と列の中に配置することができます。

MDNーグリッドレイアウトの基本概念 参考

記載してどのような表示になるか確認してみよう！

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
      <style>
        .wrapper_1 {
            /*グリッドコンテナー化 */
            display: grid;
            /* グリッド列の線名とトラックのサイズ変更*/
            grid-template-columns: 100px 150px 200px;
            /* グリッド行の線名とトラックのサイズ変更*/
            grid-template-rows: 50px 80px;
        }
        
        .box1{
          background: #0000ff;
        }
        .box2{
          background: #00ff00;
        }
        .box3{
          background: #ff0000;
        }
        .box4{
          background: #00ffff;
        }
        .box5{
          background: #ffff00;
        }
        .box6{
          background: #ff00ff;
        }
      </style>
 
    <body>
      
      <div class="wrapper_1">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
      </div>
    </body>

ブラウザ実行結果

グリッド数を変える

grid-column-start: グリッド領域のブロックの開始側の端を指定します。
grid-column-end: グリッド領域のブロックの末尾側の端を指定します。

記載してどのような表示になるか確認してみよう！

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
      <style>
        .wrapper_1 {
            /*グリッドコンテナー化 */
            display: grid;
            /* グリッド列の線名とトラックのサイズ変更*/
            grid-template-columns: 100px 150px 200px;
            /* グリッド行の線名とトラックのサイズ変更*/
            grid-template-rows: 50px 80px;
        }
        
        .box1{
          /* 開始側の指定１個目にする*/
          grid-column-start: 1;
          /* 末尾側の端4個目にする*/
          grid-column-end: 4;
          background: #0000ff;
        }
        .box2{
          background: #00ff00;
        }
        .box3{
          background: #ff0000;
        }
        .box4{
          background: #00ffff;
        }
        .box5{
          background: #ffff00;
        }
        .box6{
          background: #ff00ff;
        }
      </style>
 
    <body>      
      <div class="wrapper_1">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
      </div>
    </body>

ブラウザ実行結果

fractionの意味を知ろう

fraction(分数の意味)」の略、100px 200pxなどのピクセル単位などを使ったりしますが、何ピクセルか図ったりするのはわずらわしいので、「fr」という単位を利用します。

最大幅は、枠に合わせたグリッドの大きさを自動的に調整してくれます。

記載内容を変更してどのような表示になるか確認してみよう！

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
      <style>
        .wrapper_1 {
            /*グリッドコンテナー化 */
            display: grid;
            /* グリッド列の線名とトラックのサイズ変更 frにした場合*/
            grid-template-columns: 1fr 1.5fr 2fr;
            /* グリッド行の線名とトラックのサイズ変更 frにした場合*/
            grid-template-rows: 1fr 1.5fr 1fr;
        }
        
        .box1{
          /* 開始側の指定１個目にする*/
          grid-column-start: 1;
          /* 末尾側の端4個目にする*/
          grid-column-end: 4;
          background: #0000ff;
        }
        .box2{
          background: #00ff00;
        }
        .box3{
          background: #ff0000;
        }
        .box4{
          background: #00ffff;
        }
        .box5{
          background: #ffff00;
        }
        .box6{
          background: #ff00ff;
        }
      </style>
 
    <body>    
      <div class="wrapper_1">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
      </div>
    </body>

ブラウザ実行結果

課題

以下の並びで、display: gridをつかって、レスポンシブル（横サイズを変更しても型がくずれないように）なグリッド配置にしてください。

１行目：１カラム

２行目：２カラム

３行目：３カラム

４行目：２カラム

５行目：１カラム

ヒント：３列の場合は、<div>で子要素をつくる。もしくは、３列の部分だけを分けて作成。

作成方法は、いくつもあります。 これが正確というものがありませんので、自身でアレンジしてください。

作成したファイル名をindex_2_23.htmlにして送ってください。

実行結果

例

ヒント

以下使用するCSS例になります。実行結果の構成になるように、組み換えていきましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.◻︎◻︎◻︎◻︎ {
      /*グリッドコンテナー化 */
      display: ;
      /* グリッド列の線名とトラックのサイズ変更 frにした場合*/
      grid-template-columns: ;
      /* グリッド行の線名とトラックのサイズ変更 frにした場合*/
      grid-template-rows: ;
}
  
.〇〇〇〇{
      /* 開始側の指定⚪︎個目にする*/
      grid-column-start: ;
      /* 末尾側の端⚪︎個目にする*/
      grid-column-end: ;
        background: ;
}
.△△△△{
      background: ;
}

課題・復習用検索キーワード

検索例
🔍CSS　display　glid
🔍CSS　fr auto 違い
🔍CSS　カラムとは