[css] grid layout

Grid란?

열과 행을 교차하는 수평선과 수직선의 집합이다.
요소는 열과 행 라인 내에서 그리드에 배치할 수 있습니다.

Grid layout 기능

• 트랙 사이즈를 고정시키거나 유연하게 바꿀 수 있다.
• 항목배치
• 콘텐츠를 보유할 수 있는 추가 트랙 만들 수 있다.
• 정렬제어
• 중복 컨텐츠 제어
  -> 하나 이상의 컨텐츠를 그리드 셀이나 영역에 배치할 수 있고 부분적으로 겹칠 수 있다. 이것을 z-index 속성으로 제어할 수 있다.

Grid track 이란?

그리드의 두 선 사이에 있는 공간이다.
트랙은 길이 단위를 사용하여 정의할 수 있다.

이때 사용 되는 단위 : fr

많은 track을 가지고 있는 grid는 notation을 통해 track list 전체 또는 섹션을 반복 할 수 있다.
: reap()

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

grid-template-columns 속성을 통해서 구체적인 열 트랙을 지정할 수 있다. 하지만 grid 스스로 행을 만들 수 도 있다. 이러한 행은 암시적 그리드의 일종이다.
암시적 그리드는 grid-template-columns, grid-template-rows 속성으로 정의된 모든 행과 열로 구성된다.
또한 grid-auto-rows, grid-auto-columns 을 통해서 암시적 그리드를 만들 수 있다.

Gutters

grid sell 사이에 있는 Gutters 또는 allys는 column-gap, row-gap 속성을 통해 만들 수 있다.