그리드

격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식 입니다.
그리드 레이아웃에서 그리드 아이템의 배치되는 방식은 그리드 컨테이너 내부의 행과 열의 상호작용에 의해서 배치방식이 정해집니다.
그리드 레이아웃 방식을 선택하기 위해서 그리드 컨테이너로 선택할 요소의 display 속성을 grid 로 지정해주면 됩니다.

그리드 컨테이너

그리드 방식으로 레이아웃을 결정할 요소를 뜻 합니다.

그리드 아이템

그리드 컨테이너 내부에서 그리드 방식으로 배치되는 요소를 뜻 합니다.

그리드 컨테이너에 지정해주는 속성

grid-template-columns

그리드 컨테이너의 열에 위치한 아이템들의 크기와 개수를 지정할 수 있는 속성 입니다.
속성 값으로는

• none : 기본값이며 확실하게 지정한 값이 없으므로 자동으로 값이 정해집니다.
• 수치 : 길이를 지정할 값을 사용합니다. 음수는 불가능 합니다. fr 을 사용하면 남아있는 공간에서 몇대 몇으로 나눌 것인지 지정할 수 있습니다.
  예를 들어 grid-template-columns : 100px 1fr 2fr; 이렇게 3개 열을 만드는데 첫번째 열은 100px 로 만들고 나머지 그리드 컨테이너의 남은 공간에서 1대2 비율로 2개의 열을 만들게 됩니다.

grid-template-rows

그리드 컨테이너의 트랙 중 행에 위치한 아이템들의 크기와 개수를 지정할 수 있는 속성 입니다.
속성 값으로는

• none : 기본값이며 확실하게 지정한 값이 없으므로 자동으로 값이 정해집니다.
• 수치 : 길이를 지정할 값을 사용합니다. 음수는 불가능 합니다.

gap, grid-gap

그리드 아이템 사이의 거리를 지정할 수 있는 속성 입니다. 행과 열의 간격을 지정할 수 있습니다. grid-gap 속성은 row-gap, column-gap 속성의 단축속성 입니다. gap, grid-gap 둘다 사용 가능 합니다.
속성 값으로는

• normal : 기본값 입니다.

• 수치 : 길이를 지정할 값을 사용합니다.
  예를 들어 gap : 10px; 한개의 값만 주면 행과 열 방향의 간격이 10px 로 지정되는거고 gap : 10px 20px; 로 지정하면 행 사이의 간격, 열 사이의 간격을 지정 할 수 있습니다.

  그리드 레이아웃에서 행 또는 열의 크기를 지정할 때 사용하는 함수

• repeat(행 또는 열의 개수, 크기) : 반복되는 값을 자동으로 처리할 수 있는 함수 입니다.

• minmax(최소길이, 최대길이) : 아이템 크기의 최소값과 최대값을 지정할 수 있는 함수 입니다. 예를 들어 grid-template-columns : minmax(10px, 100px) 로 열의 값을 지정한다면 각각의 아이템들의 열 (가로) 크기가 최소 10px 크기 까지만 작아지고 최대 100px 까지만 커지게 됩니다.

아래의 두개의 키워드는 repeat 등의 함수의 첫번째 인자에 숫자 대신 사용 합니다.

• auto-fill : 행 또는 열의 최소 길이의 합보다 컨테이너의 길이가 길어진 경우에 빈 공간을 남긴다는 의미의 키워드 입니다.

• auto-fit : 컨테이너의 빈 공간을 컨텐츠가 채운다는 의미의 키워드 입니다.
  위의 두 키워드는 반응형을 고려해 사용할 수 있는 키워드이며 함수는 아닙니다. 반응형에서 유용하게 사용할 수 있습니다.

  그리드 아이템에 지정해주는 속성

  grid-column, grid-row

  그리드 컨테이너의 줄 번호를 이용해 아이템의 배치를 지정할 수 있습니다.
  
  컨테이너의 줄 번호는 위와 같이 되어 있습니다.
  예를 들어 어떤 아이템에 grid-row : 1 / 3; 으로 지정하면 그 아이템은 1번부터 3번까지의 행을 차지하게 됩니다.
  그리고 어떤 아이템에 grid-row: 2; , grid-column : 2; 로 지정하게 되면 이 아이템은 행 2번, 열 2번 자리에 위치 합니다.
  만약 모든 아이템들을 하나의 위치로 지정하게되면 모두 겹쳐서 원래 순서의 가장 마지막 아이템이 가장 위에 위치하게 됩니다.
  grid-row, grid-column 는 단축 속성이기 때문에 세부적으로 grid-row-(start or end), grid-column-(start or end) 로 세부적인 위치를 지정할 수 있습니다.

  grid-template-areas

  그리드 영역의 이름을 이용해서 레이아웃의 형태를 지정할 수 있습니다.

  grid-area

  그리드 영역의 이름을 지정할 때 사용하는 속성입니다.
  예를 들어

   li:nth-child(1) {
         grid-area: a;
       }
       li:nth-child(2) {
         grid-area: b;
       }
       li:nth-child(3) {
         grid-area: c;
       }
       li:nth-child(4) {
         grid-area: d;
       }
       li:nth-child(5) {
         grid-area: e;
       }

  위와 같이 각각의 grid item 들에 이름을 지정해주고

  grid container 에

  .container {
  grid-template-areas : 
  " a a a "
  " b b b "
  " c d e ";

  위와 같이 지정하면

  위와 같이

  

화면에 그려지는 것을 확인 할 수 있습니다.
만약 빈칸을 만들기 위해서는

.container {
grid-template-areas : 
" . a a "
" b b b "
" c d e ";

위와 같이 지정해주면

이렇게 빈칸을 만들 수 있습니다.