다시 이어지는 예제 뿌시기 ~
1편에서는 Layout, 가시화, Class naiming을 다뤘다면 !
2편에서는 Grid로 예제를 박살내보겠다 !

---

Flex와 비슷한 Grid

1. 선언 방식

grid는 flex와 동일하게 선언하고, 동일한 속성을 사용할 수 있다.

.box { display: grid; }
.box-item { ... }

• Grid Container : .box
• Grid Item : .box-item

display: grid를 설정한 .box는 Grid Container가 되고,
그의 직계 자식은 Grid Item이 된다. 플렉스와 똑같다

2. 프로퍼티

flex와 동일하게 grid에서도 동일하게 사용할 수 있는 프로퍼티가 많다.
flex를 먼저 공부했기 때문에 ! grid 공부양이 줄었다 ~ 야호 !

• gap
• order
• align-content
• align-items
• align-self
• justify-content
• justify-items
• justify-self

---

Flex와 다른 Grid

1. layout 차원

두 가지 속성의 '가장 큰 차이점'은 바로 이것이다.
flex는 단일 차원의 레이아웃에 사용한다. 가로면 가로! 세로면 세로 !!
grid는 이차원 레이아웃에 사용한다. 가로, 세로 모두 설정이 가능 !!

• Flex : 한 방향 (1차원) 시스템
• Grid : 두 방향 (2차원) 시스템

2. 선언 시 정렬

• Flex : flex를 선언 하자마자 가로 정렬됨
• Grid : grid를 선언해도 그리드 템플릿을 설정해야만 가로 정렬됨

3. reverse

• Flex : flex-direction 속성에 row-reverse, column-reverse 값으로 반대로 순서 적용 가능
• Grid : reverse 적용 불가능

---

Grid properties

grid는 2차원의 레이아웃을 관리할 수 있다보니, 관련 property가 꽤나 많다.
이 중 기본은 grid-template-rows, grid-template-columns, gap이다.

이 3가지만 잘 활용해도 반응형을 고려한 레이아웃을 (아주 * 3,000) 손쉽게 만들 수 있다.

1. Grid Container

• display 그리드 컨테이너 정의

• grid-template-rows 명시적 행의 크기 정의
• grid-template-columns 명시적 열의 크기 정의
• grid-template-areas 영역(Area) 이름을 참조해 템플릿 생성
• grid-template grid-template-xxx의 단축 속성

• row-gap 행과 행 사이의 간격(Line)을 정의
• column-gap 열과 열 사이의 간격(Line)을 정의
• gap xxx-gap의 단축 속성

• grid-auto-rows 암시적인 행(Track)의 크기를 정의
• grid-auto-columns 암시적인 열(Track)의 크기를 정의
• grid-auto-flow 자동 배치 알고리즘 방식을 정의
• grid grid-template-xxx과 grid-auto-xxx의 단축 속성

• align-content 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
• justify-content 그리드 콘텐츠를 수평(행 축) 정렬
• place-content align-content와 justify-content의 단축 속성

• align-items 그리드 아이템(Items)들을 수직(열 축) 정렬
• justify-items 그리드 아이템들을 수평(행 축) 정렬
• place-items align-items와 justify-items의 단축 속성

2. Grid Item

• grid-row-start 그리드 아이템의 행 시작 위치 지정
• grid-row-end 그리드 아이템의 행 끝 위치 지정
• grid-row grid-row-xxx의 단축 속성 (행 시작/끝 위치)

• grid-column-start 그리드 아이템의 열 시작 위치 지정
• grid-column-end 그리드 아이템의 열 끝 위치 지정
• grid-column grid-column-xxx의 단축 속성 (열 시작/끝 위치)

• grid-area 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성

• align-self 단일 그리드 아이템을 수직(열) 정렬
• justify-self 단일 그리드 아이템을 수평(행) 정렬
• place-self align-self와 justify-self의 단축 속성

• order 그리드 아이템의 배치 순서를 지정
• z-index 그리드 아이템의 쌓이는 순서를 지정

---

Grid 사용하기

아래의 예제를 grid를 활용해 만들어보겠다.
지금은 3개의 카드가 있지만, 카드는 더 추가될 수도있고 삭제될 수도 있다.

1. 정렬

• grid-template-columns 열 배치
• grid-template-row 행 배치

카드를 가로 정렬 하기 위해 grid-template-columns를 사용한다.
grid template 프로퍼티는 아래처럼 여러 단위를 활용하여 사용할 수 있다.

.grid-container {
	grid-template-columns: 100px 100px 300px;
	grid-template-columns: 100px 1fr 300px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-columns: repeat(4, 1fr);
	grid-template-columns: 100px 100px auto;
}

2. 셀 개수만큼 반복해서 작성

이때 그리드의 셀 개수만큼 숫자를 나열해야 한다.
위의 예시에선 카드가 3개씩 나열되고, 추가되면 아래로 줄바꿈 될 것이다.

.grid-container {
	/* 셀 3개 */
	grid-template-columns: 300px 300px 300px;
    
    /* 셀 6개 */
	grid-template-columns: 300px 300px 300px 300px 300px 300px;
}

3. repeat()

만약 셀이 10개라면 10번 적어야한다. (이럴수가)
이것이 넘 번거롭다면 ! repeat 함수를 사용할 수 있다.

• repeat(반복 횟수, 너비)

위의 예시를 repeat 함수를 사용하면 다음과 같다.

.grid-container {
	/* 셀 3개 */
	grid-template-columns: repeat(3, 300px);
    /* 300px 300px 300px */
    
    /* 셀 6개 */
	grid-template-columns: repeat(6, 300px);
    /* 300px 300px 300px 300px 300px 300px */
}

4. 1fr

셀의 크기를 고정 단위인 px이 아닌 상대적인 단위를 쓰고 싶은 사람 모여라 ~

fr은 fraction을 의미한다. '일부'라는 의미로 생각하면 된다.
fr은 숫자의 비율대로 트랙의 크기를 나눈다.

1fr 2fr는 트랙을 총 3개로 나누어 1:2 비율로 영역을 차지한다.

.grid-container {
	/* 셀 2개 */
	grid-template-columns: 1fr 2fr;
    
    /* 셀 6개 */
	grid-template-columns: repeat(6, 1fr); 
    /* 1fr 1fr 1fr 1fr 1fr 1fr */
}

5. minmax()

minmax는 최소값, 최대값을 지정할 수 있는 함수이다.
grid-template-rows, grid-template-columns,
grid-auto-rows, grid-auto-columns에서 사용할 수 있다.

min-width와 max-width를 동시에 적용하는 것으로 생각하면 이해가 쉽다.
보통 반응형을 고려하여, repeat() + auto-fill / fit과 함께 사용한다.

• minmax(최소값, 최대값)
• repeat(auto-fill, minmax(최소값, 최대값))

.grid-container {
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    /* 그리드 셀이 100px보다 작아지지 않고 1fr의 비율이 적용 */ 
    /* 100px보다 작아져야 할 경우, 줄바꿈 발생 */
    
    grid-template-columns: repeat(auto-fill, minmax(1fr, 100px));
    /* 그리드 셀이 100px보다 커지지 않음 */ 
}

6. auto-fit, auto-fill

auto-fit, fill을 통해서 column의 개수를 미리 선언하지 않고
설정된 너비가 허용하는 한 최대한 셀을 채울 수 있다.

• auto-fill column을 제외한 가용 공간을 그대로 놔둠
• auto-fit column을 제외한 가용 공간을 column에 분배하여 남은 공간을 맞춤

1️⃣ 가용 공간 없음

column이 그리드에 가득 차있어서 가용 공간이 없는 상태
auto-fill과 auto-fit의 차이가 없음 ⬇️

2️⃣ 가용 공간 있음 - auto-fill

column이 그리드에 가득 차지 않아서 가용 공간이 생김
남은 가용 공간을 그대로 두어 여백이 발생함 ⬇️

썸네일이 보여지는 게시판 형태(이벤트 게시판 등)에선 해당 방식을 주로 사용한다.

3️⃣ 가용 공간 있음 - auto-fit

column이 그리드에 가득 차지 않아서 가용 공간이 생김
남은 가용 공간을 나누어 column의 추가함. 여백 없음 ⬇️

---

참고자료

• 그리드 이미지
• 그리드 관련 프로퍼티 정리

그리드로 예제를 한번 더 뿌셔보았다 !
예제를 이전에 flexbox를 사용해서 뿌셨었는데 ...
flexbox는 전투력이 300이었다면 grid는 999 정도 되는 것 같다 ,,, !

그리드가 어떻게 작동하는지 제대로 이해하지 못하고 코드를 복사해서만 사용했었다.
하지만 이젠 ! 어떻게 작동하는지 이해하여 외우지 않고도 그리드 템플릿 값을 쓱쓱 작성한다 ! vV

오늘도 CSS 강점을 가진 프엔에 한 발자국 다가섰다 ! (야호 ~)