14 - CSS (grid)

13464 ワード
おしゃれなライオンのように TIL 先端学校2期 テキストリンク

grid



gridはflexに似ています
<!DOCTYPE html>
<html lang="ko">
  <head>
    <link rel="stylesheet" href="reset.css" />
    <style>
      .container {
        display: grid;
        height: 100vh;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(5, 1fr);
        grid-gap: 10px;
      }

      img {
        width: 100%;
        height: 100%;
      }

      .item1 {
        grid-column: 1 / 4;
        grid-row: 1 / 3;
      }

      .item2 {
        grid-column: 4 / 6;
        grid-row: 1 / 4;
      }

      .item3 {
        grid-column: 1/3;
      }

      .item5 {
        grid-column: 1/3;
        grid-row: 4/6;
      }

      .item6 {
        grid-column: 3/6;
        grid-row: 4/6;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item1"><img src="./img/1.jpg" alt="" /></div>
      <div class="item2"><img src="./img/6.jpg" alt="" /></div>
      <div class="item3"><img src="./img/2.jpg" alt="" /></div>
      <div class="item4"><img src="./img/5.webp" alt="" /></div>
      <div class="item5"><img src="./img/3.webp" alt="" /></div>
      <div class="item6"><img src="./img/4.jpg" alt="" /></div>
    </div>
  </body>
</html>
flexと似ている点:コンテナに表示:gridを使用!
gridでcolumnとrowをセルとして計算するのはとても便利なこと…!
サイズを大きくすると横軸がgrid-column縦軸がgrid-row…!!
つまり、flexは1次元レイアウトを位置決めする場合(水平1行レイアウトを位置決めする場合)は簡単ですが、gridは2次元レイアウトを位置決めする場合(水平2行以上のレイアウトを位置決めする場合)は簡単です!

reference


https://studiomeal.com/archives/533
iPhoneユニットテスト(二)
Test Double(Test Double)Mock VS Stubの理解