GRID

Flex를 배웠으면 Grid도 배워야지!
Flex는 box를 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있지만,
Grid는 box를 수평, 수직 영역 방향으로 동시에 레이아웃을 나눌 수 있다.

그리드 형태 정의

grid-template-rows
grid-template-columns

.container {
	display:grid;
    grid-template-columns: 100px 100px 200px;
    grid-template-columns: 2fr 1fr 1fr
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns : 100px 1fr;
    
    grid-template-rows: 100px 100px 200px;
    grid-template-rows: 2fr 1fr 1fr
    grid-template-rows: repeat(3, 1fr);
    grid-template-rows : 100px 1fr;
}

columns는 열(세로) 폭을 말한다. 각 column(열)들이 어느정도의 너비를 가질지에 대한 것.
rows는 반대로 행(가로) 폭을 말한다. 각 rows(행)들이 어느정도의 너비를 가질지에 대한 것.

• fr: 여기서 fr은 가변 그리드이다. 그리드 컨테이너 내부에 사용 가능한 공간에서 한 개의 분할 부분. 전체공간이 아닌 이용가능한 공간에서 분배한다. 어느부분이 fix 되었다면 나머지 부분을 나눈다.
• repeat: 반복 표기법이며, repeat(3, 1fr);을 1fr를 3번 반복한다는 뜻.

종류

이제 본격적으로 종류에 대해서 정리 해보자.

• grid-column-start와 grid-column-end는 그리드 컨테이너의 시작부분과 끝나는 부분을 적어주면 된다. 여기서 중요한 점은 ~ 이상 ~미만의 논리로 작동되는 것같다. 예를 들어, start가 1이고 end가 4면, 1열에서 3열까지만 선택이 된다.

양수값만 아니라 음수 값, 아니면 start가 end보다 큰 값이 올 수 있다. 여기서는 계산하기 어려우니 헷갈린다. 되도록이면 쓰지 말것.

• grid-column-end: span 2;는 end의 순서를 계산하기 보다 선택하는 영역의 크기만을 지정해 간단히 선택할 수 있다.
• grid-column :2/5: start, end 적는 것을 생략해 더욱 간단하게 적을 수 있다.

  서로 합쳐서도 적을 수 있다. grid-column: 3 / span 2;

• 행과 열을 동시에 적을 수 있다.

grid-column: 2;
grid-row: 4;

• grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end 순으로 적어서 아주 간단하게 만들 수도 있다.

  ex) grid-area: 1 / 1 / 4 / 5

grid 아무것도 안 적어주고 있으면 소스코드에 기입된 순서대로 표기된다. 간단하게 order로 순서를 바꿀수 있다.

• repeat : repeat 함수를 이용해서 간략히 적어줄 수 있다. grid-template-column: repeat(8, 12.5%); => 그리드 컨테이너의 12.5%를 8개 반복하는 열로 나눈다.

• fr :fr은 가변 그리드이다. 그리드 컨테이너 내부에 사용 가능한 공간에서 한 개의 분할 부분. 전체공간이 아닌 이용가능한 공간에서 분배한다. 어느부분이 fix 되었다면 나머지 부분을 나눈다.

  ex) grid-template-columns:1fr 5fr

이 밖에도 고정 너비와 가변 너비를 합쳐서 쓰는 방법도 있다.

마지막으로

flex보다는 grid가 덜 지저분 해보이겠다. 머리는 더 써야겠지만. 쓰이는 곳에 대해 한번 생각해봤다. flex는 네이비게이션 바같이 길쭉한 형태에 더 잘 어울릴 거 같고, grid는 카드형태 목록에 더 어울릴 거같다.