CSS_grid layout

▶▼グリッドレイアウトは？

上記のグリッドのレイアウトを作成します.Instagramのシード配列を思い出してみましょう.

▶▼▼gridレイアウト例

  <div class="grid-container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
  </div>

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 100px 100px 100px;
    grid-gap: 10px;
  }

親divにgridが与えられると、サブdivはすべてグリッドのように配列されます.

Grid-template-columnsは、グリッドの列幅と列数を設定するプロパティであり、Grid-template-rowsはグリッドの行の高さと行数を設定するプロパティです.

frという単位は何倍を占めるかを示しています.

gridでレイアウトを作成する方法は2つあります.

▶▼gridレイアウト-サブdivの高さと幅を調整

  <div class="grid-container">
      <div class="grid-nav">헤더</div>
      <div class="grid-sidebar">사이드바</div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
  </div>

  .grid-nav {
    grid-column : 1 / 4;
    grid-row : 2 / 4;
  }

grid-columnは、columnをどれだけ使用するか、grid-rowをどれだけ使用するかを設定するプロパティです.

このcssは、縦線1~4と横線2~4の領域を占めることを意味する.

▶▼gridレイアウト-より直感的なアプローチ

  <div class="grid-container">
      <div class="grid-nav">헤더</div>
      <div class="grid-sidebar">사이드바</div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
  </div>

  .grid-nav {
    grid-area: 헤더;
  }

  .grid-sidebar {
    grid-area: 사이드;
  }

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 100px 100px 100px;
    grid-gap: 10px;
    grid-template-areas: 
      "헤더 헤더 헤더 헤더"
      "사이드 사이드 . ."
      "사이드 사이드 . ."
  }

grid-template-areasプロパティ.

「もしあなたの子供の中に「ヘザー」という名前があれば、最初の行のように4格、

を占めさせてください」

人の子供の中に「サイドバー」という子供がいたら、2行目に2格、3行目に2格を占めさせてください.
コマンドのプロパティ.