CSSでのグリッド属性の使い方の紹介（コード）

この記事では、CSS での Grid 属性の使用法 (コード) を紹介します。必要な方は参考にしていただければ幸いです。

グリッド レイアウト

親要素に追加された属性

grid-template-columns/grid-template-rows

• #要素の行または列の幅と高さを定義します

##親要素が 9 等分の部分に分割されている場合、その方法は関係ありません。多くの子要素が存在します。要素は 9 等分に表示されます。
grid-template-columns: 33% 33% 33%; と書くことができます。 33%);

• .container {
    width: 200px;
    height: 200px;
    display: grid;
    background-color: coral;
    margin: 10px;
  }
  
  .container .item {
    border: 1px solid #ccc;
    background-color: chocolate;
  }
  .container1 {
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 33% 33% 33%;
  }

  <div>
    <div></div>
    <div></div>
  </div>

グリッド テンプレート エリア

#親要素のグリッド テンプレート エリアは、子要素のグリッド エリアと連携してグリッド エリアを定義します

• ##ピリオドは空のグリッドを表しますユニット

• #

  .container {
    width: 200px;
    height: 200px;
    display: grid;
    background-color: coral;
    margin: 10px;
  }
  
  .container .item {
    border: 1px solid #ccc;
    background-color: chocolate;
  }
  .container2 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "header header . footer"
      "main main . sidebar"
      "main main . sidebar";
  }
  
  .container2 .item-1 {
    grid-area: header;
  }
  
  .container2 .item-2 {
    grid-area: main;
  }
  
  .container2 .item-3 {
    grid-area: sidebar;
  }
  
  .container2 .item-4 {
    grid-area: footer;
  }

  <div>
    <div>header</div>
    <div>main</div>
    <div>sidebar</div>
    <div>footer</div>
  </div>

##グリッド-列-ギャップ/グリッド-行-ギャップ/グリップ-ギャップ

グリッド線のサイズを指します。グリッド項目間の間隔とも言えます。

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}
.container3 {
  grid-template-columns: repeat(3, 30%);
  grid-template-rows: repeat(3, 30%);
  grid-column-gap: 2%;
  grid-row-gap: 2%;
}

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

justify -items/align-items

justify-items子要素の内容を垂直列軸に揃える

• align-itemsAlign 子要素の内容は水平行軸に揃えられます

• 両方の属性には 4 つの値があります

• 私の例では、比較しやすいように、ネストされたグリッド

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}

.container4 {
  width: 400px;
  height: 200px;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(2, 50%);
}
.container4 .item {
  display: grid;
}
.container4 .item p {
  background-color: coral;
  border: 1px dashed #aaa
}
.container4 .item-1 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  justify-items: start;
}
.container4 .item-2 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  justify-items: end;
}
.container4 .item-3 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  justify-items: center;
}
.container4 .item-4 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  justify-items: stretch;
}
.container4 .item-5 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  align-items: start;
}
.container4 .item-6 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  align-items: end;
}
.container4 .item-7 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  align-items: center;
}
.container4 .item-8 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  align-items: stretch;
}

<div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
<li><p></p></li>
<p style="text-align: center;">##justify-content /align-content<span class="img-wrap"><img src="https://img.php.cn//upload/image/595/108/774/1539762039887932.png" title="1539762039887932.png" alt="CSSでのグリッド属性の使い方の紹介（コード）"> </span></p>
<p>子要素の配置を設定します。justify は垂直を意味し、align は水平を意味します <strong></strong></p>
<pre class="brush:php;toolbar:false">.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}

.container5 {
  width: 700px;
  height: 200px;
  grid-template-columns: repeat(7, 14%);
  grid-template-rows: repeat(2, 50%);
}

.container5 .item {
  display: grid;
}

.container5 .item p {
  background-color: coral;
  border: 1px dashed #aaa
}

.container5 .item-1 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: start;
}

.container5 .item-2 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: end;
}

.container5 .item-3 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: center;
}

.container5 .item-4 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: stretch;
}

.container5 .item-5 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: space-around;
}

.container5 .item-6 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: space-between;
}

.container5 .item-7 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: space-evenly;
}

.container5 .item-8 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: start;
}

.container5 .item-9 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: end;
}

.container5 .item-10 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: center;
}

.container5 .item-11 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: stretch;
}

.container5 .item-12 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: space-around;
}

.container5 .item-13 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: space-between;
}

.container5 .item-14 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: space-evenly;
}

rrree

grid-auto-columns/grid-auto-rows

grid-columns の後の値が1 / 2 の形式で、列 1 から開始することを意味します。グリッド線は列 2 のグリッド線で始まり、列 2 のグリッド線で終わります。この属性で定義されたグリッドが親要素の範囲を超える場合、暗黙的なグリッドが自動的に生成されます

grid-auto -columns および Grid-auto-rows の 2 つのプロパティは、これらの暗黙的なグリッド トラックの幅を指定します

• <div>
    <div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
    </div>
    <div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
    </div>
    <div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
    </div>
    <div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
    </div>
    <div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
    </div>
    <div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
    </div>
    <div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
    </div>
    <div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
    </div>
    <div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
    </div>
    <div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
    </div>
    <div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
    </div>
    <div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
    </div>
    <div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
    </div>
    <div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
      <div>list</div>
    </div>
  </div>

  .container {
    width: 200px;
    height: 200px;
    display: grid;
    background-color: coral;
    margin: 10px;
  }
  
  .container .item {
    border: 1px solid #ccc;
    background-color: chocolate;
  }
  
  .container6 {
    width: 120px;
    height: 180px;
    grid-template-columns: 60px 60px;
    grid-template-rows: 90px 90px;
    grid-auto-columns: 60px;
  }
  .container6 .item-1 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    border: 1px solid #ccc;
  }
  .container6 .item-2 {
    grid-column: 5 / 6;
    grid-row: 2 / 3;
    border: 1px solid #ccc;
  }

##グリッド自動フロー

グリッド要素がない場合、自動配置

行は左から右への配置、列は上から下への配置を意味します

• <div>
    <div>1/2&2/3</div>
    <div>5/6&2/3</div>
  </div>

  .container {
    width: 200px;
    height: 200px;
    display: grid;
    background-color: coral;
    margin: 10px;
  }
  
  .container .item {
    border: 1px solid #ccc;
    background-color: chocolate;
  }
  
  .container7 {
    display: grid;
    width: 200px;
    height: 40px;
    grid-template-columns: 40px 40px 40px 40px 40px;
    grid-template-rows: 40px 40px;
    /* grid-auto-flow: row; */
    grid-auto-flow: column;
  }
  .container7 .item-1 {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  
  .container7 .item-5 {
    grid-column: 5;
    grid-row: 1 / 3;
  }

##子要素に追加された属性 グリッド列開始/グリッド列終了/グリッド行開始/グリッド行終了/グリッド列/グリッド行

定義 グリッドの開始位置または終了位置

は、この行から開始することを示す数値です。値はスパンに数字を加えたもので、この行の位置がカバーされていることを示します

• <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  .container {
    width: 200px;
    height: 200px;
    display: grid;
    background-color: coral;
    margin: 10px;
  }
  
  .container .item {
    border: 1px solid #ccc;
    background-color: chocolate;
  }
  
  .container8 {
    margin-top: 20px;
    grid-template-columns: repeat(5, 20%);
    grid-template-rows: repeat(5, 20%);
  }
  .container8 .item-1 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .container8 .item-2 {
    grid-column-start: 4;
    grid-column-end: span 5;
    grid-row-start: 2;
    grid-row-end: span 5;
  }
  .container8 .item-3 {
    grid-column: 1 / span 2;
    grid-row: 2 / span 4;
  }

• 

  justify-self/align-self

  • 网格子项内容与格线对齐

  .container {
    width: 200px;
    height: 200px;
    display: grid;
    background-color: coral;
    margin: 10px;
  }
  
  .container .item {
    border: 1px solid #ccc;
    background-color: chocolate;
  }
  .container9 {
    width: 400px;
    height: 200px;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(2, 50%);
  }
  .container9 .item-1 {
    justify-self: start;
  }
  .container9 .item-2 {
    justify-self: end;
  }
  .container9 .item-3 {
    justify-self: center;
  }
  .container9 .item-4 {
    justify-self: stretch;
  }
  .container9 .item-5 {
    align-self: start;
  }
  .container9 .item-6 {
    align-self: end;
  }
  .container9 .item-7 {
    align-self: center;
  }
  .container9 .item-8 {
    align-self: stretch;
  }

  <div>
    <div>item-1</div>
    <div>item-2</div>
    <div>item-3</div>
    <div>item-4</div>
    <div>item-5</div>
    <div>item-6</div>
    <div>item-7</div>
    <div>item-8</div>
  </div>