Gird의 기초적인 내용은 예제를 뿌시면서 사알짝 맛을 보았다.
하지만 Grid의 면모는 이제부터 시작이다 ... (진지)

이전글 보러가기 Flex vs Grid, Grid properties, grid-template

---

grid-template

이전글에서 주로 다뤘던 grid-template에 대해 더 자세히 알아보자.
grid-container 하위에 10개의 grid-item이 있다.

.grid {
  /* 꾸밈용 */
  max-width: 400px;
  margin: 50px auto;

  /* 그리드 */
  display: grid;
  gap: 4px;
}

1. grid-template-column

1️⃣ grid-template-columns: 100px;

10개의 그리드 아이템이 있지만, grid-template-columns을 100px로 하나만 설정했다. 이렇게 되면, 가로축에 100px짜리 column이 하나만 쌓인다.

100px;을 지정하면 자동으로 100px씩 차곡차곡 쌓이는 것이 아니니 주의 !
(내가 그랬삼요)

2️⃣ grid-template-columns: 100px 100px;

이번엔 grid-template-columns을 100px로 두개 설정했다.
가로축에 100px짜리 column이 2개가 쌓였다.

즉, 가로축에 쌓길 원하는 셀 개수만큼 작성한다.

2. grid-template-rows

1️⃣ grid-template-rows: 100px;

이번엔 column 설정 없이, row만 100px로 한개 설정했다.

3. column + row

1️⃣ columns: 100px 100px | rows: 100px;

column과 row를 함께 사용하면 아래와 같다.
column은 세로선(열)을 의미하고 row는 가로선(행)을 의미한다.

coulmn이 열이라서 1, 3, 5, 7, 9를 담당한다고 생각했었다.
하지만 그런 개념이 아니라, 전체 그리드의 세로 선을 column이 담당한다.

1편 참고 - repeat(), 1fr, minmax(), auto-fit, auto-fill

---

grid-row, column

그렇다면 이제 grid item에 개별로 설정할 수 있는 요 친구에 대해 알아보자.
grid-row/column은 아래 두 가지의 기능을 담당한다.

1. 크기 지정
2. 위치 이동

1. grid-row

• grid-row-start 행의 시작점 지정
• grid-row-end 행의 끝점 지정

grid-row는 start와 end가 축약된 값이다.
아래 2️⃣ 번 박스를 노란색 영역으로 옮기고 크기를 조정 해보자.

1️⃣ grid-row-start: 2;

row의 시작점을 2로 설정했다.
원래 1번 박스와 3번 박스 사이에 있었던 2번 박스가 2x1로 이동했다.

2️⃣ grid-row-end: 5;

시작점이 2인 2번 박스의 row 끝점을 5로 설정했다.
이번엔 2번 박스가 총 3칸을 차지했다. 2x1 ~ 5x1까지 크기가 커졌다.

3️⃣ grid-row-end: span 3;

span은 명시된 숫자만큼 연속된 행을 차지하게 한다.
얼만큼의 행을 차지할지 숫자로 작성하기 때문에 상당히 직관적이다. 내 생각~

• 위치 이동 있음
  • grid-row-start : 시작점 명시
  • grid-row-end : span 행의 개수
• 위치 이동 없음
  • grid-row-start 또는 end : span 행의 개수

.grid-item:nth-child(2) {
  /* span 활용 X */
  grid-row-start: 2;
  grid-row-ends: 5;

  /* span 활용 O */
  grid-row-start: 2;
  grid-row-end: span 3;

4️⃣ code

지금까지 살펴본 내용을 정리하면 아래와 같다.
위치 이동 없이 크기만 조정되면 된다면, grid-row: span 2 한 줄로 가능하다.
span과 축약 속성의 활용은 개인의 선호에 따라 선택해서 사용하자 !

• 복잡한 레이아웃에선 축약 속성보단,
  시작과 끝을 명시적으로 표기해야 가독성이 좋다.

• grid-auto-flow 속성 사용시, 시작점과 끝점을 설정하지 않은
  모든 grid item은 위치가 변할 수 있다. 하단 grid-auto-flow 참고

.grid-item:nth-child(2) {
  /* 축약 X */
  grid-row-start: 2;
  grid-row-ends: 5;
  
  /* 축약 O */
  grid-row: 2 / 5;

  /* span 활용 - 축약 X */
  grid-row-start: 2;
  grid-row-end: span 3;

  /* span 활용 - 축약 O */
  grid-row: 2 / span 3

}

---

2. grid-column

지금까지 row를 살펴봤다면 이번엔 column을 살펴보자 !

• grid-column-start 열의 시작점 지정
• grid-column-end 열의 끝점 지정

역시 row와 마찬가지로, grid-column은 start와 end가 축약된 값이다.
아래 7️⃣ 번 박스를 노란색 영역으로 옮기고 크기를 조정해보자.

1️⃣ grid-column-start: 2;

column의 시작점을 2로 설정했다.
원래 6번 박스와 8번 박스 사이에 있었던 7번 박스가 3x2로 이동했다.

2️⃣ grid-column-end: 5;

column의 끝점을 5로 설정했다.
이번엔 7번 박스가 총 3칸을 차지했다. 3x2 ~ 3x5까지 크기가 커졌다.

이때, 7번 박스 주변의 빈 공간은 grid-auto-flow: dense;를 통해 채울 수 있다.
이것에 대해선 아래에서 언급할 예정 !

3️⃣ grid-column-end: span 3;

row와 동일하게, span은 명시된 숫자만큼 연속된 행을 차지하게 한다.

.grid-item:nth-child(2) {
  /* span 활용 X */
  grid-column-start: 2;
  grid-column-ends: 5;

  /* span 활용 O */
  grid-column-start: 2;
  grid-column-end: span 3;

4️⃣ code

.grid-item:nth-child(2) {
  /* 축약 X */
  grid-column-start: 2;
  grid-column-ends: 5;
  
  /* 축약 O */
  grid-column: 2 / 5;

  /* span 활용 - 축약 X */
  grid-column-start: 2;
  grid-column-end: span 3;

  /* span 활용 - 축약 O */
  grid-column: 2 / span 3
}

---

3. 예제

보다 확실히 이해하기 위해서 오른쪽의 그리드를 만들어보자 !

1️⃣ 1번 상자

1번 상자는 총 오른쪽으로 2칸, 아래쪽으로 2칸을 차지해야 한다.
시작점과 끝점은 아래와 같다.

• row start 1 | end 3
• column start 1 | end 3

.grid-item:nth-child(1) {
  grid-column-start: 1;
  grid-column-ends: 3;
  grid-row-start: 1;
  grid-row-ends: 3;

}

2️⃣ 5번 상자

5번 상자는 총 아래쪽으로 3칸을 차지해야 한다.
시작점과 끝점은 아래와 같다. 이번엔 span을 활용해보았다.

• row start 4
• column start 2 | end 5

.grid-item:nth-child(1) {
  /* span을 사용할 경우 한 줄로 가능 */
  grid-row: span 3;

  /* 명시적으로 시작점과 끝점을 설정 */
  grid-column-start: 4;
  grid-row-start: 2;
  grid-row-ends: 5;

}

3️⃣ 9번 상자

9번 상자는 총 오른쪽으로 2칸을 차지해야 한다.
시작점과 끝점은 아래와 같다. 이번에도 span을 활용했다.

• column start 1 | end 3

.grid-item:nth-child(1) {
  /* span을 사용할 경우 한 줄로 가능 */
  grid-column: span 2;

  /* 명시적으로 시작점과 끝점을 설정 */
  grid-column-start: 1;
  grid-column-ends: 3;

}

아주 간단하게 그리드를 만들었다.
아래의 두가지 경우에서 아주 유용하게 사용되니, 사용법을 잘 익혀보자 !

• Grid Container에 설정한 템플릿과 별개로 Grid Item에 크기를 지정할 때
• 마크업 순서와 다르게 위치를 지정할 때

---

grid-auto-flow

grid-auto-flow은 '자동 배치 알고리즘'으로 배치하지 않은 Grid Item을 어떤 방식으로 흐르게 할지 정의한다.

• 배치하지 않은 Grid Item :
  grid-row, grid-column으로 위치가 직접 명시되지 않은 grid item
  ⭐️ 무조건 위치가 고정되어야 하는 경우, 시작점과 끝점 명시 필요 ⭐️

크게 row와 column값이 있고, 빈 공간을 채우는 옵션이 추가된다.

• row 초기값 | 각 행 축을 따라 차례로 배치
• column 각 열 축을 따라 차례로 배치
• dense (row dense) 각 행 축을 따라 차례로 배치, 빈 영역 메움
• column dense 각 열 축을 따라 차례로 배치, 빈 영역 메움

1. row

초기값이다. row, 즉 가로선이 벽이 된다고 생각하면 흐름을 이해하기 쉽다.
가로선이 벽이 되어서, grid item이 자동으로 오른쪽으로 쌓인다.

grid-row와 grid-column으로 특정 좌표에 배치된 7번 상자를 제외한
모든 상자가 row 흐름에 맞춰 배치되었다.

2. column

column, 즉 세로선이 벽이 된다고 생각하면 흐름을 이해하기 쉽다.
세로선이 벽이 되어서, grid item이 자동으로 아래쪽으로 쌓인다.

3. dense, column dense

그리드 내 빵구를 채워주는 빵꾸똥꾸다.

• dense : row의 여백을 메꿈
• column dense : column의 여백을 메꿈

빈 자리를 채우기 위해서, 그리드가 마크업 순서대로 채워지지 않을 수 있다.
빈 자리를 채우기 위해서, 무슨 짓이든 하는 명예 소방관 속성이라고 생각하자.

⬆️ grid-auto-flow: dense

⬆️ grid-auto-flow: column dense

---

참고 자료

• grid-auto-flow 속성 참고 1
• grid-auto-flow 속성 참고 2

역시 백 번 설명 듣는 것보다 한 번 직접 해보는게 최고다 !
(물론 종찬쌤 강의를 잘 들은 덕분에 ~ !)

막연했던 그리드 ... 이제 꽤나 자신감이 붙는다 !
아직 그리드 관련해서 모르는 속성이 많은 것 같지만 (잘 모름)
아무튼 그리드 찍먹 성공 ! 앞으로 과제에 그리드로 도배 해봐야지 ~

벌써 24년의 첫 주가 끝났다 ! 24년이랑 아직 제대로 인사도 못했는데 ,,,
안녕 잘 지내보자 ~ 나를 좋은 회사로 데려다줘 ~