[CSS] Grid (1) - 2차원 레이아웃의 시작과 fr 단위

이번 포스팅에서는 [최신 레이아웃] 파트의 세부 주제인 CSS Grid의 기본 개념과 컨테이너 설정에 대하여 상세히 알아보겠습니다.

1. Flexbox vs CSS Grid, 언제 무엇을 쓸까?

Flexbox가 1차원(한 줄) 정렬에 특화되어 있다면, CSS Grid는 2차원(행과 열) 구조를 설계하는 데 특화되어 있습니다. 쇼핑몰 상품 목록이나 복잡한 대시보드 레이아웃을 짤 때는 Grid가 압도적으로 코드를 줄여줍니다.

2. 마법의 비율 단위: fr (Fraction)

Grid에서 새롭게 등장한 fr 단위는 "사용 가능한 여백의 비율"을 의미합니다. 퍼센트(%)와 비슷하지만, gap을 알아서 제외하고 계산해주기 때문에 머리 아픈 calc() 연산이 필요 없습니다.

.dashboard {
  display: grid;
  /* 3개의 열을 생성. 첫 번째는 250px 고정, 나머지는 1:2의 비율로 나눔 */
  grid-template-columns: 250px 1fr 2fr;
  
  /* 아이템 사이의 간격을 20px로 설정 (fr 계산 시 이 간격을 빼고 남은 공간을 나눕니다!) */
  gap: 20px; 
}

---

지금까지 CSS Grid의 기본 템플릿 설정과 fr 단위에 대해 살펴보았습니다. fr 단위를 적극 활용하여 수학 계산 없는 유연한 레이아웃을 구축해 보세요.