display

グリッドレイアウトを指定するときは、まずグリッドを適用する要素の外部部分をグリッドコンテナとして作成します.
ディスプレイのプロパティ値

grid:コンテナ内のアイテムをブロックレベル要素として配置します.

inline-grid:コンテナ内のアイテムを行レベル要素として配置します.

grid-template-colums, grid-template-rows

グリッドコンテナにアイテムを配置するときに、バーと行のサイズと数を指定するには、grid-template-columsプロパティとgrid-template-crowsプロパティを使用します.

ex) 너비가 200px인 칼럼 3개와 높이가 100px인 그리드 레이아웃
<style>
#wrapper {
	display : grid;
    grid-template-colums : 200px 200px 200px;
    grid-template-rows : 100px;
}
</style>

fr単位

グリッドレイアウトは反応式ウェブページに基づいて設計され,固定px単位は不適切である.
したがって、グリッドレイアウトではfr単位を使用して相対的なサイズを指定します.
2:1:2の割合でコラムを置くと、

grid-template-colums : 2fr 1fr 2fr 

いいですよ.

repeat()関数

px,fr単位を用いて同じ値を複数回繰り返すと,コードが乱雑になる.CSSメッシュレイアウトでは、repeat()関数を使用して表現を簡略化できます.

ex) 너비가 200px인 칼럼 3개와 높이가 100px인 그리드 레이아웃
<style>
#wrapper {
	display : grid;
    grid-template-colums : 200px 200px 200px;
    grid-template-rows : 100px;
}
</style>
=
<style>
#wrapper {
	display : grid;
    grid-template-colums : repeat(3, 200px);
    grid-template-rows : 100px;
}
</style>

minmax()関数

ローの高さを固定せず、最上位値と最上位値で柔軟に指定した関数を使用します.

ex) 줄 높이의 최솟값이 100px이고 내용이 많으면 자동으로 늘리고, 칼럼은 200px을 3번 반복하는 그리드 레이아웃
<style>
#wrapper {
	display : grid;
    grid-template-colums : repeat(3, 200px);
    grid-template-rows : minmax(100px, auto);
}
</style>

auto-fill, auto-fit

repeat()関数を使用するときにバー幅値のauto-fillまたはauto-fitを指定すると、画面幅に応じて個数を調整できます.

ex) 줄 높이의 최솟값이 100px이고 내용이 많으면 자동으로 늘리며 너비가 200px인 칼럼을 
화면 너비에 가득 찰 때까지 배치하는 레이아웃
<style>
#wrapper {
	display : grid;
    grid-template-colums : repeat(auto-fit, 200px);
    grid-template-rows : minmax(100px, auto);
}
</style>

ここでauto-fillもauto-fitも自動で欄数を調整でき、画面が広くなると欄数が多くなり、狭くなると欄数が少なくなります.この2つの違いはauto-fitが画面が大きいときに残りのスペースがないのではなく、いっぱいで表され、auto-fillはバーの最小幅だけを表示し、残りのスペースを残していることです.

grid-column-gap, grid-row-gap, grid-gap

これらは、グリッドレイアウト間の間隔を調整するアトリビュートです.
grid-gapプロパティの最初の値がgrid-row-gapの2番目の値はgrid-column-gapに相当します.

grid-column-gap:コラムとコラムの間隔を調整します.

grid-row-gap:行と行の間隔を調整します.

grid-gap:grid-column-gapとgrid-row-gapは同時に間隔を指定します.

ex) 칼럼과 칼럼 사이의 간격 20px 줄과 줄 사이의 간격 50px
<style>
#wrapper {
	display : grid;
    grid-row-gap : 50px;
    grid-column-gap : 20px;
}
</style>
=
<style>
#wrapper {
	display : grid;
    grid-gap : 50px 20px;
}
</style>

グリッド線を使用したレイアウトの設定

上図は3つのrowと3つのcolumnからなるレイアウトです.
すなわち、以下に示すように、4つの行線と4つの列線が生成される.
グリッド線の使い方

grid-column-start:コラムの先頭の行番号を指定します.

grid-column-end:コラムの最後の行の番号を指定します.

grid-column:挿入(/)のコラムの開始番号と終了番号.

ex) box1의 예시
<style>
#box1 {
grid-row-start : 1;
grid-row-end : 2;
grid-column-start : 1;
grid-column-end : 4;
}
</style>
=
<style>
#box1 {
grid-row : 1/2 (라인1부터 시작해 라인2에서 끝난다.)
grid-column : 1/4 (칼럼1부터 시작해 칼럼4에서 끝난다.)
}
</style>

grid-row-start:行頭の行番号を指定します.

grid-row-end:行末の行番号を指定します.

grid-row:行開始番号と終了番号を付けます.

ex) box2의 예시
<style>
#box2 {
grid-row-start : 2;
grid-row-start : 4;
grid-column-start : 1;
grid-column-end : 2;
}
</style>
=
<style>
#box2 {
grid-row : 2/4 (라인2부터 시작해 라인4에서 끝난다.)
grid-column : 1/2 (칼럼1부터 시작해 칼럼2에서 끝난다.)
}
</style>

異なる方法で定義

grid-areaプロパティとgrid-template-areasプロパティを使用して、レイアウトをより簡単に定義することもできます.

<style>
      #wrapper{
        width:700px;
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        grid-template-rows:repeat(3, 100px);
        grid-template-areas: 
          "box1 box1 box1"
          "box2 box3 box3"
          "box2 . box4";
      }
{/* 위 처럼 grid-template-areas에 3개의 칼럼과 3개의 줄에 맞게 아래에 grid-area로 정의한 속성들은 넣는다.
*빈 칸은 . 으로 표시한다. */}
      .box{
        padding:15px;
        color:#fff;
        font-weight:bold;
        text-align:center;
      }   
      .box1 {
        background-color:#3689ff;
        grid-area:box1;
        {/* 위와 같이 grid-area : 이름 과 같이 정의하여 위의 grid-template-areas 에 사용한다. */}
      }
      .box2 {
        background-color:#00cf12;
        grid-area:box2;
        {/* 위와 같이 grid-area : 이름 과 같이 정의하여 위의 grid-template-areas 에 사용한다. */}
      }
      .box3 {
        background-color:#ff9019;
        grid-area:box3;
        }
        {/* 위와 같이 grid-area : 이름 과 같이 정의하여 위의 grid-template-areas 에 사용한다. */}
      .box4 {
        background-color:#ffd000;
        grid-area:box4;
      }
      {/* 위와 같이 grid-area : 이름 과 같이 정의하여 위의 grid-template-areas 에 사용한다. */}
    </style>

今日勉強したレイアウトの中でgrid-playoutが一番簡単で、その中でgrid-ptemplate-areasは本当に画期的なようです.rowとcolumnの個数を増やすことで,より複雑で簡潔な設計を十分に設計できる.