CSS 그리드 레이아웃 가이드 - 핵심 속성부터 실전 반응형 배치까지 한 번에 정리

웹 페이지 레이아웃을 잡다가 float를 띄우고 clear로 정리하고, 다시 position으로 미세 조정하느라 반나절을 보낸 경험이 있으실 겁니다. 요소 하나가 어긋나면 전체 배치가 무너지는 방식이라 스트레스도 큽니다. CSS 그리드 레이아웃 가이드가 필요한 이유가 여기에 있습니다. 그리드는 행과 열을 동시에 다루는 2차원 배치 시스템이라, 복잡한 화면 구조도 코드 몇 줄로 선언할 수 있습니다.

왜 지금 CSS 그리드인가

CSS 그리드는 2017년 3월 크롬 57, 파이어폭스 52, 사파리 10.1에 거의 동시에 탑재되면서 표준으로 자리 잡았습니다. Can I Use 기준 전 세계 브라우저 지원율이 96%를 넘기 때문에, 인터넷 익스플로러를 지원해야 하는 특수한 환경이 아니라면 호환성 걱정 없이 쓸 수 있습니다.

그리드가 기존 방식과 결정적으로 다른 점은 레이아웃을 컨테이너에서 선언한다는 것입니다. 자식 요소 하나하나에 float나 width를 지정하는 대신, 부모에 틀을 정의하면 자식들이 자동으로 배치됩니다.

• 2차원 제어: 행과 열을 한 번에 다룹니다. 플렉스박스는 한 방향만 제어합니다.
• 코드량 감소: float 기반으로 30줄 넘게 쓰던 레이아웃이 5~6줄로 줄어드는 경우가 많습니다.
• 순서 독립: HTML 순서와 무관하게 시각적 배치를 바꿀 수 있어 반응형 대응이 쉽습니다.

그리드 시작하기 - 컨테이너와 fr 단위

시작은 두 줄입니다. 부모 요소에 display: grid를 선언하고, grid-template-columns로 열을 정의하면 됩니다.

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

여기서 fr 단위가 핵심입니다. fr은 fraction의 약자로, 남은 공간을 비율로 나눠 갖습니다. 위 코드는 가운데 열이 양쪽 열의 2배 너비를 차지하는 3단 구조를 만듭니다. px 값을 계산기로 두드릴 필요가 없습니다.

repeat와 minmax로 더 짧게

같은 열을 반복할 때는 repeat 함수를 씁니다. repeat(4, 1fr)은 1fr짜리 열 4개와 같습니다. minmax(200px, 1fr)처럼 최소와 최대 크기를 함께 지정하면 콘텐츠가 지나치게 좁아지는 것을 막을 수 있습니다.

반드시 알아야 할 핵심 속성 정리

그리드 관련 속성은 20개가 넘지만, 실무에서 매일 쓰는 것은 아래 7개 정도입니다. 이것만 익혀도 대부분의 레이아웃을 만들 수 있습니다.

실전 예제 - 반응형 카드 레이아웃 만들기

블로그 목록이나 상품 진열처럼 카드가 여러 장 나열되는 화면은 그리드의 대표 활용처입니다. 아래 코드가 사실상 전부입니다.

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

auto-fit은 화면 너비에 맞춰 열 개수를 자동으로 조절합니다. 화면이 1000px이면 카드가 4장, 500px이면 2장으로 알아서 재배치되기 때문에 미디어 쿼리를 한 줄도 쓰지 않고 반응형이 완성됩니다.

auto-fit과 auto-fill의 차이

둘 다 열 개수를 자동으로 정하지만 카드가 적을 때 동작이 다릅니다. auto-fill은 빈 열 자리를 그대로 남겨 두고, auto-fit은 빈 자리를 접어 남은 카드를 넓게 늘립니다. 카드 목록에는 대부분 auto-fit이 자연스럽습니다.

한 가지 실무 팁을 더하면 카드 제목 길이 관리입니다. 제목이 어떤 카드는 한 줄, 어떤 카드는 세 줄이면 행 높이가 들쭉날쭉해져 정돈된 느낌이 사라집니다. 콘텐츠를 등록할 때 글자수 세기 도구로 제목을 25자 안팎으로 맞춰 두면 그리드가 훨씬 깔끔하게 유지됩니다.

그리드 vs 플렉스박스, 언제 무엇을 쓸까

둘 중 하나만 옳은 것이 아니라 역할이 다릅니다. 기준은 간단합니다.

• 그리드: 페이지 전체 골격, 카드 진열, 대시보드처럼 행과 열이 동시에 필요한 2차원 구조
• 플렉스박스: 내비게이션 바, 버튼 그룹, 아이콘과 텍스트 정렬처럼 한 방향으로 흐르는 1차원 구조

플렉스박스는 콘텐츠가 흐름을 만들고, 그리드는 틀이 콘텐츠를 배치합니다. 페이지의 뼈대는 그리드로 잡고 그 안의 작은 정렬은 플렉스박스에 맡기는 것이 가장 현실적인 조합입니다.

실제로 두 기술은 경쟁 관계가 아니라 중첩해서 쓰는 관계입니다. 그리드로 만든 헤더 영역 안에서 로고와 메뉴를 플렉스박스로 정렬하는 식입니다.

반응형 팁과 기존 코드 리팩토링

grid-template-areas를 쓰면 반응형 대응이 눈에 보이는 코드가 됩니다. 영역에 header, sidebar, main 같은 이름을 붙이고, 미디어 쿼리에서는 이름 배치만 다시 써 주면 됩니다. HTML은 전혀 건드리지 않습니다.

@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      "header"
      "main"
      "sidebar";
  }
}

기존 float 기반 코드를 그리드로 옮길 때는 에디터의 정규식 치환 기능이 시간을 크게 줄여 줍니다. float: left나 clear: both 같은 패턴을 일괄 검색해 지우는 방식인데, 치환 패턴이 의도대로 동작하는지 정규식 테스터에서 먼저 검증하고 실행하면 코드가 엉키는 사고를 예방할 수 있습니다.

오늘 바로 해 볼 액션 두 가지를 제안합니다. 첫째, 운영 중인 페이지에서 float로 짠 영역 하나를 골라 display: grid와 gap으로 다시 작성해 보세요. 둘째, 카드 목록이 있다면 repeat(auto-fit, minmax())를 적용해 미디어 쿼리 없는 반응형을 직접 확인해 보세요. 한 번 손에 익으면 이전 방식으로 돌아가기 어려울 만큼 생산성 차이가 큽니다.