CHAKOIRO’s BLOG 関西のフリーランスWEB制作者のWEB知識備忘録 > html・CSS・JS備忘 > [css]display:grid;@gridレイアウトーその２ー

[css]display:grid;@gridレイアウトーその２ー

最終更新日：2021.10.01 [金]　公開日：2020.08.19 [水]　カテゴリー：html・CSS・JS備忘

Pocket

直感的にわかりやすい、2次元レイアウトのグリッドレイアウト。

かなり奥が深くて、私自身まだかなり手探りなのですが、ちょっとずつ自分の学習のためにもまとめてみようと思います。

Contents

1 gridレイアウトのグリッドラインについて
2 grid-rowとgrid-columnで範囲を指定
3 grid-auto-flow：グリッドの並び順を操作する
- 3.1 dense

gridレイアウトのグリッドラインについて

グリッドレイアウトはこのようなグリッドラインで場所を指定できます。

grid-column、grid-rowでそれぞれの位置を指定します。
例えば、４のグリッドだったら、

grid-column:1;
grid-row:1;

といった感じです。このように簡単に位置を指定できて、なおかつ４の幅を５の位置まで伸ばす・・・と言うことも簡単にできるのです。

そういう範囲も指定しつつする方法はいくつかあるので見ていきましょう。

grid-rowとgrid-columnで範囲を指定

grid-column: 2 / 3　略してgrid-column: 2;

       <style>
        .wrap1{
            display: grid;
  grid-template-columns: 80px 80px 80px;
  grid-template-rows: 80px 80px 80px;
            border:2px solid #f00
        }
        
        .wrap1 > div{
            border:1px solid #000;
        }
     
     
     .wrap1 .box_1{
        color: #f00;
         border:1px solid #f00;
         background-color: rgba(245,5,9,0.12);
grid-column: 2 / 3; /*最初の図の線の位置を指定　省略して2だけでも良い*/
grid-row: 3 / 4;　/*最初の図の線の位置を指定　省略して3だけでも良い*/
     }
      </style>
  <div class="wrap1">
    <div class="box_1">box_1</div>
    <div class="box_2">box_2</div>
    <div class="box_3">box_3</div>
    <div class="box_4">box_4</div>
    <div class="box_5">box_5</div>
    <div class="box_6">box_6</div>
    <div class="box_7">box_7</div>
    <div class="box_8">box_8</div>
  </div>

<style>

.wrap1{

display: grid;

grid-template-columns: 80px 80px 80px;

grid-template-rows: 80px 80px 80px;

border:2px solid #f00

}

.wrap1 > div{

border:1px solid #000;

}

.wrap1 .box_1{

color: #f00;

border:1px solid #f00;

background-color: rgba(245,5,9,0.12);

grid-column: 2 / 3; /*最初の図の線の位置を指定　省略して2だけでも良い*/

grid-row: 3 / 4;　/*最初の図の線の位置を指定　省略して3だけでも良い*/

}

</style>

</div>

box_1

box_2

box_3

box_4

box_5

box_6

box_7

box_8

grid-column: 1 / 3

 <style>
        .wrap2{
            display: grid;
  grid-template-columns: 80px 80px 80px;
  grid-template-rows: 80px 80px 80px;
            border:2px solid #f00
        }
        
        .wrap2 > div{
            border:1px solid #000;
        }
     
     
     .wrap2 .box_1{
        color: #f00;
         border:1px solid #f00;
         background-color: rgba(245,5,9,0.12);
grid-column: 1 / 3; /*線の位置で、範囲を指定：この場合は1から３まで*/
grid-row: 2;　
     }
     
        </style>
  <div class="wrap2">
    <div class="box_1">box_1</div>
    <div class="box_2">box_2</div>
    <div class="box_3">box_3</div>
    <div class="box_4">box_4</div>
    <div class="box_5">box_5</div>
    <div class="box_6">box_6</div>
    <div class="box_7">box_7</div>
    <div class="box_8">box_8</div>
  </div>

<style>

.wrap2{

display: grid;

grid-template-columns: 80px 80px 80px;

grid-template-rows: 80px 80px 80px;

border:2px solid #f00

}

.wrap2 > div{

border:1px solid #000;

}

.wrap2 .box_1{

color: #f00;

border:1px solid #f00;

background-color: rgba(245,5,9,0.12);

grid-column: 1 / 3; /*線の位置で、範囲を指定：この場合は1から３まで*/

grid-row: 2;　

}

</style>

</div>

box_1

box_2

box_3

box_4

box_5

box_6

box_7

box_8

grid-column: 1 / -1

     <style>
        .wrap3{
            display: grid;
  grid-template-columns: 80px 80px 80px;
  grid-template-rows: 80px 80px 80px;
            border:2px solid #f00
        }
        
        .wrap3 > div{
            border:1px solid #000;
        }
     
     
     .wrap3 .box_1{
        color: #f00;
         border:1px solid #f00;
         background-color: rgba(245,5,9,0.12);
grid-column: 1 / -1; /*線の位置で、範囲を指定：この場合は1から-1まで*/
grid-row: 2;　
     }
     
        </style>
  <div class="wrap3">
    <div class="box_1">box_1</div>
    <div class="box_2">box_2</div>
    <div class="box_3">box_3</div>
    <div class="box_4">box_4</div>
    <div class="box_5">box_5</div>
    <div class="box_6">box_6</div>
    <div class="box_7">box_7</div>
    <div class="box_8">box_8</div>
  </div>

<style>

.wrap3{

display: grid;

grid-template-columns: 80px 80px 80px;

grid-template-rows: 80px 80px 80px;

border:2px solid #f00

}

.wrap3 > div{

border:1px solid #000;

}

.wrap3 .box_1{

color: #f00;

border:1px solid #f00;

background-color: rgba(245,5,9,0.12);

grid-column: 1 / -1; /*線の位置で、範囲を指定：この場合は1から-1まで*/

grid-row: 2;　

}

</style>

</div>

box_1

box_2

box_3

box_4

box_5

box_6

box_7

box_8

grid-column: 1 / span 2

     <style>
        .wrap4{
            display: grid;
  grid-template-columns: 80px 80px 80px;
  grid-template-rows: 80px 80px 80px;
            border:2px solid #f00
        }
        
        .wrap4 > div{
            border:1px solid #000;
        }
     
     
     .wrap4 .box_1{
        color: #f00;
         border:1px solid #f00;
         background-color: rgba(245,5,9,0.12);
grid-column: 1 / span 2; /*線の位置で、範囲を指定：この場合は1から３まで*/
grid-row: 2;　
     }
     
        </style>
  <div class="wrap4">
    <div class="box_1">box_1</div>
    <div class="box_2">box_2</div>
    <div class="box_3">box_3</div>
    <div class="box_4">box_4</div>
    <div class="box_5">box_5</div>
    <div class="box_6">box_6</div>
    <div class="box_7">box_7</div>
    <div class="box_8">box_8</div>
  </div>

<style>

.wrap4{

display: grid;

grid-template-columns: 80px 80px 80px;

grid-template-rows: 80px 80px 80px;

border:2px solid #f00

}

.wrap4 > div{

border:1px solid #000;

}

.wrap4 .box_1{

color: #f00;

border:1px solid #f00;

background-color: rgba(245,5,9,0.12);

grid-column: 1 / span 2; /*線の位置で、範囲を指定：この場合は1から３まで*/

grid-row: 2;　

}

</style>

</div>

box_1

box_2

box_3

box_4

box_5

box_6

box_7

box_8

名前をグリッドラインにつけて配置する

        <style>
        .wrap5{
            display: grid;
  grid-template-columns: [grid-c1] 80px [grid-c2] 80px [grid-c3] 80px [grid-c4];
  grid-template-rows:[grid-r1] 80px [grid-r2] 80px [grid-r3] 80px [grid-r4] ;
            border:2px solid #f00
        }
        
        .wrap5 > div{
            border:1px solid #000;
        }
     
     
     .wrap5 .box_1{
        color: #f00;
         border:1px solid #f00;
         background-color: rgba(245,5,9,0.12);
grid-column: grid-c2 / grid-c3;
grid-row: grid-r2 / grid-r4;　
     }
     
        </style>
  <div class="wrap5">
    <div class="box_1">box_1</div>
    <div class="box_2">box_2</div>
    <div class="box_3">box_3</div>
    <div class="box_4">box_4</div>
    <div class="box_5">box_5</div>
    <div class="box_6">box_6</div>
    <div class="box_7">box_7</div>
    <div class="box_8">box_8</div>
  </div>

<style>

.wrap5{

display: grid;

grid-template-columns: [grid-c1] 80px [grid-c2] 80px [grid-c3] 80px [grid-c4];

grid-template-rows:[grid-r1] 80px [grid-r2] 80px [grid-r3] 80px [grid-r4] ;

border:2px solid #f00

}

.wrap5 > div{

border:1px solid #000;

}

.wrap5 .box_1{

color: #f00;

border:1px solid #f00;

background-color: rgba(245,5,9,0.12);

grid-column: grid-c2 / grid-c3;

grid-row: grid-r2 / grid-r4;　

}

</style>

</div>

box_1

box_2

box_3

box_4

box_5

box_6

box_7

box_8

grid-auto-flow：グリッドの並び順を操作する

 <style>
        .wrap6{
            display: grid;
            grid-auto-flow: column;/*初期値はrow*/
  grid-template-columns: 80px 80px 80px;
  grid-template-rows: 80px 80px 80px;
            border:2px solid #f00;
        }
        
        .wrap6 > div{
            border:1px solid #000;
        }
     
     
     
        </style>
  <div class="wrap6">
    <div class="box_1">box_1</div>
    <div class="box_2">box_2</div>
    <div class="box_3">box_3</div>
    <div class="box_4">box_4</div>
    <div class="box_5">box_5</div>
    <div class="box_6">box_6</div>
    <div class="box_7">box_7</div>
    <div class="box_8">box_8</div>
  </div>

<style>

.wrap6{

display: grid;

grid-auto-flow: column;/*初期値はrow*/

grid-template-columns: 80px 80px 80px;

grid-template-rows: 80px 80px 80px;

border:2px solid #f00;

}

.wrap6 > div{

border:1px solid #000;

}

</style>

</div>

box_1

box_2

box_3

box_4

box_5

box_6

box_7

box_8

dense

空白ができた場所に埋め込んでいくように配置される。

PREV: [css]display:grid;@gridレイアウトをざっくりまとめるーその１：基本ー

NEXT: [css]display:grid;@gridレイアウトーその３：【grid-template-areas】ー

[css]display:grid;@gridレイアウトーその２ー

gridレイアウトのグリッドラインについて

grid-rowとgrid-columnで範囲を指定

grid-column: 2 / 3　略してgrid-column: 2;

grid-column: 1 / 3

grid-column: 1 / -1

grid-column: 1 / span 2

名前をグリッドラインにつけて配置する

grid-auto-flow：グリッドの並び順を操作する

dense

おすすめの関連記事

コメントを残すコメントをキャンセル

[css]display:grid;@gridレイアウトーその２ー

gridレイアウトのグリッドラインについて

grid-rowとgrid-columnで範囲を指定

grid-column: 2 / 3 略してgrid-column: 2;

grid-column: 1 / 3

grid-column: 1 / -1

grid-column: 1 / span 2

名前をグリッドラインにつけて配置する

grid-auto-flow：グリッドの並び順を操作する

dense

おすすめの関連記事

コメントを残す コメントをキャンセル

grid-column: 2 / 3　略してgrid-column: 2;

コメントを残すコメントをキャンセル