display:grid

標準状態

box1

box2

box3

box4

  
  HTML

  /* CssGrid:使用するには囲む必要がある */
  <div class="container">
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
  </div>

  css

  .box {
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }

  .countainer {
  display: grid;
  }

grid-template-columns

box1

box2

box3

box4

  
  .countainer-columns {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;  /* 子供の要素に対してwidth指定可能 */
  }

grid-template-columns

+

justify-content:center

要素を中央に配置

box1

box2

box3

box4

  
    .countainer-columns1 {
    display: grid;
    grid-template-columns: 100px 100px 100px 100px;
    justify-content: center; /* 子供の要素を中央に配置 */
    }

grid-template-columns:(2)

box1

box2

box3

box4

  
  .countainer-columns2 {
  display: grid;
  /*  子供の要素(3子供)に対してwidth指定して、残りの子供はコラムして表示される */
  grid-template-columns: 100px 100px 100px;
  }

grid-template-columns:(3)

[1fr][2fr]など画面幅に対して変化

box1

box2

box3

box4

  
  .countainer-columns-fr {
  display: grid;
  grid-template-columns: 100px 1fr 100px;  /* 1fr=100pxの余った部分を全て占領する */
  }

grid-template-columns:(4)

box1

box2

box3

box4

  
  .countainer-columns-fr4 {
  display: grid;
  grid-template-columns: 100px 1fr 100px 1fr;  /*  1fr=100pxの余った部分を全て占領する  */
  }

各子要素

grid-template-rows:

2列目の大きさなどを指定可能

box1

box2

box3

box4

  
  .countainer-child-rows {
  display: grid;
  grid-template-columns: 100px 100px 100px;

                    /*width height */
  grid-template-rows: 100px 200px ;       /*  2個目の折り返しのheight200pxになる  */
  }

grid-template-rows:(1fr)

heightを使用すると(1fr)使用可能

box1

box2

box3

box4

  
  .countainer-child-rows-1fr {
  display: grid;
  grid-template-columns: 100px 100px 100px;

  /*  2個目の折り返しのところが(1fr)になる  */
  grid-template-rows: 100px 1fr ;

  /* (1fr)使用するには、heightが指定していないといけない */
  height: 500px;
  border: 1px solid black;
  }

grid-template-rows:(1fr)-colum

heightを使用すると(1fr)使用可能

box1

box2

box3

box4

  
  .countainer-child-rows-1fr-culum {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 1fr ;
  height: 500px;
  grid-auto-flow: column;    /* colum */
  }

order(全てに記載)

並び順変更

box5

box6

box7

box8

  
  .countainer-child-order {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  }

  .box5 {
  order: 5;     /* order */
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }

  .box6 {
  order: 8;    /* order */
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  } 

  .box7 {   
  order: 7;    /* order */
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }
    
  .box8 {
  order: 6;    /* order */
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }

grid-colum()

セル間設定可能

ベースに考える

box100

box200

box300

box400

  
  HTML

  <div class="countainer-child-columns">
    <div class="box100">box100</div>
    <div class="box200">box200</div>
    <div class="box300">box300</div>
    <div class="box400">box400</div>
  </div>

  CSS
  
  .countainer-child-columns {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 200px;
  height: 500px;
  border: 2px solid blue;
  }

  .box100 {
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }

  .box200 {
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }

  .box300 {
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }

  .box400 {
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }

grid-colum: 1/4;

1/4=>1(スタート)2(ゴール)===2/4:3/4:などで「BOX500」変化

box100

box200

box300

box500

  
  .box500 {
  /* grid-column: 1/4=(1)スタート位置(2)ゴール位置 */
  grid-column: 1/4;
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }

grid-temple-area

これをベースに考える

box1

box2

box3

box4

  
  HTML

  <div class="countainer-child-grid-temple-area">
    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
    <div class="box">box4</div>
  </div>

  CSS

  .countainer-child-grid-temple-area {
  display: grid;
  }

  .box {
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }

設定したarea名を入れて分割を割合指定

box1

box2

box3

box4

  
  HTML

  <div class="countainer-child-grid-temple-area1">
    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
    <div class="box">box4</div>
  </div>

  CSS

  .countainer-child-grid-temple-area1 {
  display: grid;

  /* grid-temple-area 設定したarea名を入れて分割を割合指定 */
  grid-template-areas: "area1 area1 area1""area2 area3 area3" "area4 area4 area4"
  }

  .box {
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }

grid-temple-area

エリア位置を決めて分割できる(4分割)

使用頻度小

boxarea1

boxarea2

boxarea3

boxarea4

boxarea5

boxarea6

boxarea7

boxarea8

boxarea9

boxarea10

  
  .countainer-child-grid-temple-area-area {
  display: grid;
  grid-template-areas: "area1 area2 area3 area4" "area5 area5 area6 area6" "area7 area7 area7 area7""area8 area9 area10 area10"  
  }

  .boxarea1 {
  grid-area: area1;
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }

  .boxarea2 {
  grid-area: area2;
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }

  .boxarea3 {
  grid-area: area3;
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }

  .boxarea4 {
  grid-area: area4;
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }

  .boxarea5 {
  grid-area: area5;
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }

  .boxarea6 {
  grid-area: area6;
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }

  .boxarea7 {
  grid-area: area7;
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }

  .boxarea8 {
  grid-area: area8;
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }

  .boxarea9 {
  grid-area: area9;
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }

  .boxarea10 {
  rid-area: area10;
  border: 1px solid black;
  background-color: bisque;
  text-align: center;
  }