Grid 레이아웃

🎯 학습 목표

이 강을 마치면 여러분은 가로와 세로를 동시에 다루는 2차원 배치 도구인 Grid로, 요소들을 격자 형태로 깔끔하게 배치할 수 있게 됩니다. 지난 두 강에서 배운 Flexbox가 한 줄(1차원) 배치에 강하다면, Grid는 행과 열이 있는 격자(2차원) 배치에 강합니다. 카드 목록이나 페이지 전체 레이아웃을 짤 때 특히 강력합니다.

구체적으로는 세 가지를 배웁니다. 첫째, 그리드 컨테이너와 열을 정의하는 grid-template-columns를 익힙니다. 둘째, 비율 단위 fr과 repeat를 살펴봅니다. 셋째, 이를 활용한 반응형 카드 그리드를 만들어 봅니다.

🔲 그리드 시작하기 — display: grid와 열 정의

이 섹션에서는 Grid의 출발점을 살펴보겠습니다.

Grid도 Flexbox처럼 부모(컨테이너)에서 시작합니다. 부모에 display: grid를 주면 그리드 컨테이너가 됩니다. 다만 Grid의 핵심은 여기서 한 걸음 더 나아가, 열(세로줄)을 몇 개, 각각 얼마나 넓게 만들지를 직접 정한다는 것입니다. 이를 grid-template-columns로 지정합니다.

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

이 코드는 200px 너비의 열 세 개를 만듭니다. 그러면 컨테이너 안의 자식들이 이 격자를 따라 3개씩 한 줄로 채워지고, 넘치는 것은 자동으로 다음 줄로 내려갑니다. 즉 grid-template-columns에 적은 값의 개수가 곧 열의 개수이고, 각 값이 그 열의 너비가 됩니다. Flexbox에서는 아이템들이 알아서 흐르지만, Grid는 이렇게 격자 틀을 먼저 그려 놓고 거기에 채우는 방식이라는 점이 다릅니다.

📊 비율 단위 fr과 repeat

이 섹션에서는 Grid를 훨씬 유연하게 만들어 주는 fr 단위와 repeat를 살펴보겠습니다.

열 너비를 200px처럼 고정하면 화면 크기에 유연하게 대응하지 못합니다. 이때 쓰는 것이 Grid만의 특별한 단위인 fr(fraction, 비율)입니다. fr은 남는 공간을 비율로 나눈 크기를 뜻합니다.

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

이 코드는 공간을 똑같이 셋으로 나눈 세 개의 열을 만듭니다. 화면이 넓어지면 각 열도 함께 넓어지므로, 고정 px보다 훨씬 유연합니다. 만약 2fr 1fr이라고 하면 첫 열이 둘째 열보다 두 배 넓은 두 개의 열이 됩니다.

그런데 1fr 1fr 1fr처럼 같은 값을 반복하는 것은 번거롭습니다. 이때 repeat를 쓰면 간단해집니다. repeat(3, 1fr)은 '1fr을 3번 반복'이라는 뜻으로, 1fr 1fr 1fr과 똑같습니다.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

여기에 지난 강에서 배운 gap도 그대로 쓸 수 있습니다. Grid에서 gap은 행과 열 사이 간격을 모두 깔끔하게 만들어 주어 특히 유용합니다. 이렇게 repeat·fr·gap을 조합하면 균등한 격자를 몇 줄로 손쉽게 만들 수 있습니다.

🃏 반응형 카드 그리드 만들기

이 섹션에서는 Grid의 진가가 드러나는 반응형 카드 그리드를 살펴보겠습니다.

상품 목록이나 게시글 카드처럼 여러 개의 카드를 격자로 배치하는 것은 웹에서 매우 흔합니다. 앞서 배운 것만으로도 카드 그리드를 만들 수 있지만, 열 개수를 고정하면 화면 크기에 따라 카드가 너무 좁아지거나 넓어집니다. Grid에는 이를 자동으로 조절하는 강력한 기능이 있습니다.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

이 한 줄이 마법을 부립니다. minmax(200px, 1fr)은 각 열을 '최소 200px, 최대 1fr'로 만들라는 뜻이고, auto-fill은 '공간이 허락하는 만큼 열을 자동으로 채우라'는 뜻입니다. 그 결과 화면이 넓으면 카드가 여러 개가 한 줄에, 화면이 좁아지면 자동으로 줄어들어 배치됩니다. 개발자가 화면 크기별로 일일이 열 개수를 정하지 않아도, Grid가 알아서 최적의 열 개수를 계산해 주는 것입니다. 이것이 Grid가 카드 그리드에 특히 사랑받는 이유입니다. (이 기능은 조금 복잡하니, 지금은 '이런 마법 같은 한 줄이 있다'는 정도로 익히고 필요할 때 다시 보면 됩니다.)

🤔 Grid와 Flexbox, 언제 무엇을?

이 섹션에서는 두 배치 도구를 언제 골라 쓸지 정리하겠습니다. 초보자가 가장 궁금해하는 부분입니다.

Grid와 Flexbox는 경쟁 관계가 아니라 역할이 다른 도구입니다. 간단한 기준은 이렇습니다. 한 방향(가로 또는 세로) 배치에는 Flexbox가 편하고, 가로·세로 양방향 격자 배치에는 Grid가 편합니다.

예를 들어 헤더 안에서 로고와 메뉴를 나란히 정렬하는 것은 한 줄 배치이니 Flexbox가 적합하고, 페이지를 여러 칸의 격자로 나누거나 카드를 바둑판처럼 까는 것은 2차원 배치이니 Grid가 적합합니다. 실무에서는 이 둘을 함께 쓰는 경우가 많습니다. Grid로 큰 틀을 잡고, 그 안의 각 칸에서 Flexbox로 세부 정렬을 하는 식입니다. 둘 다 익혀 두면 어떤 배치든 만들 수 있습니다.

⚠️ Grid를 다룰 때의 주의점

이 섹션에서는 흔한 실수를 정리하겠습니다.

첫 번째, grid-template-columns를 빠뜨리는 것입니다. display: grid만 주고 열을 정의하지 않으면, 자식들이 그냥 한 열로 세로로 쌓입니다. 격자를 만들려면 반드시 열을 정의해야 합니다.

두 번째, fr과 px를 혼동하는 것입니다. fr은 Grid에서만 쓰는 비율 단위입니다. 고정 크기가 필요하면 px, 유연한 비율이 필요하면 fr을 쓰세요.

세 번째, 모든 것을 Grid로만 하려는 것입니다. 한 줄 정렬이나 가운데 정렬은 Flexbox가 더 간단합니다. 상황에 맞는 도구를 고르는 것이 좋은 코드의 시작입니다.

📝 핵심 요약

이번 강에서는 Grid 레이아웃을 배웠습니다.

• display: grid — 부모를 그리드 컨테이너로 만들고, grid-template-columns로 열의 개수와 너비를 정의합니다.
• fr과 repeat — fr은 공간을 비율로 나누는 단위, repeat(3, 1fr)은 같은 열을 반복해 간결하게 만듭니다.
• 반응형 카드 그리드 — repeat(auto-fill, minmax(...))로 화면 크기에 따라 열 개수가 자동 조절됩니다.
• Grid vs Flexbox — 한 줄 배치는 Flexbox, 2차원 격자는 Grid가 적합하며 함께 쓰기도 합니다.

이제 Flexbox와 Grid로 다양한 배치를 만들 수 있게 되었습니다. 다음 강에서는 화면 크기에 따라 디자인이 바뀌는 반응형 디자인을 배워, 모바일과 데스크톱 모두에서 잘 보이는 페이지를 만드는 법을 익히겠습니다. 다음 강 「반응형 디자인」에서 이어가겠습니다.

📚 참고 자료

• CSS Grid — MDN Web Docs
• grid-template-columns — MDN Web Docs
• 그리드 레이아웃 기본 개념 — MDN Web Docs