グリッドレイアウト (Grid) は、最も強力な CSS レイアウトソリューションです。

Webページをグリッドに分割し、異なるグリッドを任意に組み合わせて様々なレイアウトを作成できます。以前は、この効果は複雑な CSS フレームワークを通じてのみ実現できましたが、現在はブラウザーに組み込まれています。

上の写真のようなレイアウトで、

コンテナとプロジェクト

グリッドレイアウトを採用した領域を「コンテナ（container）」と呼びます。グリッドを使用してコンテナ内に配置される「アイテム」と呼ばれる子要素

<div>
 <div><p>1</p></div>
 <div><p>2</p></div>
 <div><p>3</p></div>
</div>

最も外側の<div>要素はコンテナで、内側の 3 つの<div>要素はアイテムです

行と列

コンテナ内の水平方向の領域を「行」(ロウ)、垂直方向の領域を「列」(カラム)と呼びます。

横方向の暗い領域は「行」、縦方向の暗い領域は「列」です。

細胞

行と列が交差する領域を「セル」と呼びます。

通常、n行とm列はセルになりますn x m。たとえば、3 行 3 列では 9 個のセルが生成されます。

グリッド線

グリッドを区切る線を「グリッド線」と呼びます。水平グリッド線は行を分割し、垂直グリッド線は列を分割します。

通常、n行には水平のグリッドラインがありn + 1、m列にはm + 1垂直のグリッドラインがあり、たとえば、3 行に 4 つの水平グリッドラインがあります。

5 つの水平グリッド線と 5 つの垂直グリッド線を持つ 4 x 4 グリッド

1. コンテナのプロパティ

コンテナーでグリッドレイアウトを指定したら、行と列を分割する必要があります。

grid-template-columnsプロパティは各列の列幅を定義します

grid-template-rowsプロパティは各行の行の高さを定義します

絶対単位の使用に加えて、パーセンテージも使用できます。

#container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

繰り返す（）

特にグリッドが多い場合、同じ値を繰り返し書き込むのは非常に面倒な場合があります。このとき、repeat()関数を使用して繰り返し値を簡略化できます。

#container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

自動入力キーワード

場合によっては、セルのサイズは固定されていますが、コンテナーのサイズは不定です。各行 (または各列) にできるだけ多くのセルを含めたい場合は、auto-fillキーワードを使用して自動入力を指定できます。

#container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

fr キーワード

比例関係を表現しやすくするために、グリッドレイアウトにはfrキーワード (fraction の略で、「断片」を意味します) が用意されています。2 つの列の幅がそれぞれと1frの場合2fr、後者は前者の 2 倍であることを意味します

#container {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container{
            display: grid;
            /* display: inline-grid; */

            grid-template-columns: 200px 200px 200px;
            grid-template-rows: 100px 100px 100px;


            /* grid-template-rows: 33.3% 33.3% 33.3%;
            grid-template-columns: 200px 200px 200px; */

            /* grid-template-rows: repeat(3,200px);
            grid-template-columns: repeat(3,100px); */

            /* grid-template-rows: repeat(auto-fill,200px);
            grid-template-columns: repeat(auto-fill,400px); */

            /* grid-template-rows: 100px 100px;
            grid-template-columns: 1fr 1fr 1fr 2fr 3fr; */
        }
        .item{
            font-size: 50px;
            text-align: center;
            border: 1px solid #e5e4e9;
        }
        .item-1{
            background-color: aqua;
        }
        .item-2{
            background-color: blue;
        }
        .item-3{
            background-color: orange;
        }
        .item-4{
            background-color: green;
        }
        .item-5{
            background-color: greenyellow;
        }
        .item-6{

Grid_grid レイアウトの基本