TIL#05 CSS Gridを学びましょう!

昨日Flexboxを勉強したのに続き、今日はGridを整理する予定です.実際、GridのA to Zを詳しく整理するには、すでに整理された文章や講義が多すぎる.
特に1分エンコーディングという文章はよく整理されていて、勉強もよくできています.ここでは、私が本当にGridをうまく使えるかどうかを検証する観点から書きます.

FlexboxはなぜGridが生まれたのですか?

Flexboxには何か不便なところがありますが、もっと発達したGridが現れたのではないでしょうか.
例えば、flex-wrap: wrap;属性が適用される場合、justify-content: space-between;属性が同時に適用される場合、以下の物品は両端に密着しなければならない.最後のアイテムが真ん中にあっても

これはFlexboxが1つの方向のレイアウトしか決定できない1次元システムであるためです.縦軸または横軸そこで,より発展した二次元システム,グリッドが生成された.

Gridの使い方

Gridは親要素の子要素の形態を定義します!

.container {
	display: grid;
    
    /* 행을 배치하고자 할 때 */
    grid-templete-rows: 50px 50px 100px;
    /* grid-templete-rows: 1fr 1fr 2fr */
    /* grid-templete-rows: repeat(3, 1rf) */
    /* grid-templete-rows: 50px 50px auto */
    
    /* 열을 배치하고자 할 때 */
    /* grid-templete-columns: 50px; 50px 100px; */
}

grid-template-rowsプロパティの場合、各値は行の形状を定義します.これは、行の数とサイズを調整できることを意味します.定義された値で行数をカウントします.50px, 50px, 100px3個の値が定義されており、幅値ごとに3行あります.サブエレメントが2つしかなく、値が3つと定義されている場合、3番目のエレメントはアイテムがない場合にスペースを占有します.

.parent {
  display: grid;
  grid-template-rows: 1fr 2fr 3fr;
  width: 300px;
}

もちろん、grid-template-columns属性については、カラムの形態を定義するため、カラムの数とサイズを調整する必要があります.

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;
  width: 300px;
  height: 300px;
}

繰返し(繰返し回数、繰返し値)

grid-template-columnsまたはgrid-template-rowsの値を決定する場合、重複する値はrepeatで処理することができる.

.container {
	grid-template-columns: repeat(5, 1fr);
    
	/* 이것과 동일! 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr */
}

auto-fill, auto-fit

:columnの個数を事前に決定したくない場合は、自動的に決定します.

列の数が定まらない.設定した親の幅が許容される範囲内で、セルを最大限に塗りつぶします.

.container {
	grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}

grid-auto-columns, grid-auto-rows

このプロパティはrepeat()で、値を作成できます.行や列の個数を指定せずにrepeat内で繰返し回数を指定し、繰返し値を指定するだけで自動的に処理できます.
だから回数を決めた時に使いたくない.
思ったより時間が長くて、次の内容は明日書きます...では次のTILで続きます!

参考文献

1分コード-今度こそCSS Gridに慣れる!
MDN Grid
符号化されていないCSS Masterclass