display:grid;が便利

普段の業務でマークアップを行うことが多いのですが、
display:grid;が便利で直感的にかけることを知ったので紹介します！

hoge

今日のコード

......
......
  <style>
    .item-wrap {
      // gridを宣言
      display: grid;
      grid-template:
        "header header header header header" 100px
        "....   ....   ....   ....   ...." 20px
        "item-1 ....   item-2 ....   item-3" auto/30% 3% 30% 3% 30%;
    }
    .header {
      grid-area: header;
      background: #ccc;
      text-align: center;
      line-height: 100px;
    }
    .item01 {
      grid-area: item-1;
      background: #ccc;
      text-align: center;
    }
    .item02 {
      grid-area: item-2;
      background: #ccc;
      text-align: center;
    }
    .item03 {
      grid-area: item-3;
      background: #ccc;
      text-align: center;
    }
  </style>
  <body>
    <div class="item-wrap">
      <div class="header">
        ヘッダー
      </div>
      <div class="item01">
        <p>アイテム01</p>
      </div>
      <div class="item02">
        <p>アイテム02</p>
      </div>
      <div class="item03">
        <p>アイテム03</p>
      </div>
    </div>
  </body>
</html>

それぞれの要素にgrid-areaで名前を書き込んでいきます。
指定したものはgrid-templateにて使えるユニークなものとなっていることが確認できます。
中身をみてみましょう！

grid-template:
  "header header header header header" 100px
  "....   ....   ....   ....   ...." 20px
  "item-1 ....   item-2 ....   item-3" auto/30% 3% 30% 3% 30%;

一段目はheaderを指定していています。一列の全てに書き込むことによって100%でheader要素を書き込むことができます。

二段目は....と書かれていますが、これらは余白を開ける為に書き込まれています。gap: 00px;のような指示をstyleに書き込むと同様に
余白の効果は得られますが、template内の全体に適応されてしまう為あまり使い勝手がよくありません。
よって要素ごとに余白を変えたい場合などはこのように記述した方が良さそうです！

三段目はitem要素と余白を順に出力しています。
auto/30% 3% 30% 3% 30%のように記述されているのはheightやwidthを指定している箇所となります。

このように爆速でグリッドができるようになっていて、レスポンシブも簡単にできます。

今回は以上です！

ブログの投稿ログ

# 今日のコード

今日のコード