CSS Grid의 Fraction 단위, 반복 함수(repeat), 명시적·암시적 트랙, auto

 

1. Fr 단위를 이용한 유연한 트랙 크기

• 픽셀(px) 대신 fr(fraction) 단위를 쓰면 남는 공간을 손쉽게 분배
• 예:→ 전체 가로 공간을 1:1:2 비율로 나눔

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

• 동일 크기 열 만들기:이렇게 하면 브라우저 너비 변화에 따라 자동으로 열 너비가 조정됨

.container {
  grid-template-columns: 1fr 1fr 1fr 1fr; /* 4개 열이 동일 비율 */
}

---

2. repeat() 함수로 코드 간결화

• 반복되는 fr 값을 더 짧게 작성 가능
• 예:

.container {
  /* 1fr을 4번 반복 */
  grid-template-columns: repeat(4, 1fr);
}

• 열 개수만 바꾸면 자동으로 트랙 수가 조정되어 유지보수성↑

---

3. 명시적(Explicit) vs 암시적(Implicit) 트랙

• 명시적 트랙: grid-template-rows/columns로 직접 정의한 행·열
• 암시적 트랙: 아이템이 넘칠 때 브라우저가 자동으로 생성하는 추가 행·열
• 암시적 행을 스타일링하려면 grid-auto-rows 등의 속성 활용 가능하지만, 초반엔 주로 명시적 트랙만 사용해도 충분

---

4. auto 키워드 활용하기

• fr이 남은 공간을 채운다면, **auto**는 컨텐츠 크기만큼 공간을 차지
• 혼합 사용 예:→ 세 번째 열은 컨텐츠 너비만큼, 나머지 두 열은 여유 공간을 1:2 비율로 분할

.container {
  grid-template-columns: 1fr 2fr auto;
}

---

5. 행에도 Fr과 auto 적용

• 행 높이도 fr로 유연하게 분배

.container {
  height: 600px;
  grid-template-rows: 1fr 2fr; /* 전체 높이의 1:2 비율 */
}

• auto를 섞으면, 특정 행은 컨텐츠 높이에 딱 맞게, 나머지는 fr로 채우는 형태 구현

---

마무리

위 기법들만으로도 반응형 4×2 그리드, 콘텐츠 기반 열, 비율 기반 레이아웃 등을 간단히 구성할 수 있습니다.
다음에 **grid-column/grid-row**를 이용해 아이템 배치(라인 번호 지정, 영역 지정) 와 span 기능을 실습해 보겠습니다.

즐거운 코딩 되세요! 🚀