CSS Grid 사용 가이드

Grid vs Flexbox

Grid와 Flexbox는 모던 레이아웃 모듈의 대표 주자로 다양한 레이아웃을 구현할 수 있습니다. 하지만 각각 특성이 있어 전문으로 하는 분야가 달라 상황에 따라 적합한 방법을 사용하면 됩니다.

Grid 레이아웃은 박스 및 콘텐츠의 크기와 위치를 제어 할 수 있는 강력한 기능을 가진 새로운 레이아웃 모델입니다. X 또는 Y 중 하나의 축을 통해 요소를 배치하는 Flexbox와 달리, Grid는 2차원 축을 모두 사용해 요소를 배치할 수 있어 보다 강력합니다.

Grid 레이아웃은 요소를 그리드에 자유롭게 배치 할 수 있기 때문에 HTML 마크업 순서와 상관 없이 시각적으로 레이아웃 구조를 변형하는데 제약이 없습니다. 뿐만 아니라 미디어 쿼리와 그리드를 함께 사용하면 다양한 디바이스에 최적화된 인터페이스를 사용자에게 제공할 수 있습니다.

Grid는 2차원 방향으로 배치 또는 정렬이 가능하고, 레이아웃에 대한 하향식(Top-Down) 접근법을 사용합니다. 요소를 명시적으로 겹치거나, 강력한 스패닝(Span) 기능을 제공합니다.

Flexbox는 축(Axis) 내의 공간 분배에 중점을 두고 레이아웃에 대한 간단한 상향식 접근법을 사용합니다. 컨텐츠 크기 기반의 줄 바꿈 시스템을 사용하여 보조 축을 제어하고 기본 마크업 계층을 사용하여 보다 복잡한 레이아웃을 작성합니다.

2가지 방법 모두 CSS 제작자에게 가치 있고 상호 보완적인 도구가 될 것으로 기대됩니다.

등장 배경

웹 사이트가 단순한 문서에서 복잡한 인터랙션을 수행하는 애플리케이션으로 발전함에 따라, 문서 레이아웃 기술만으로 애플리케이션 레이아웃을 구현하기 어려워졌습니다. 기존의 레이아웃 기술을 총 동원하여 애플리케이션 레이아웃을 구현했으나, 다양한 문제가 발생했고, 많은 애플리케이션이 제약된 레이아웃 방법을 선택하는 것으로 타협했습니다.

그리드 레이아웃은 이러한 문제를 해결하기 위해 고안되었습니다. 레이아웃에 사용 가능한 공간을 행과 열에 맞춰 배치할 수 있는 메커니즘을 제공합니다. 제작자는 애플리케이션의 빌딩 블록 요소를 정의된 그리드 영역에 정확하게 배치하거나, 크기를 설정할 수 있습니다.

자유로운 배치 / 크기 조정

그리드 레이아웃은 웹 페이지 내의 요소를 스마트하게 크기 조정하는데 사용할 수 있습니다. 아래 그림은 게임 제목(Game Title), 통계(Stats) 게임 보드(Board), 점수(Score) 및 컨트롤(Controls) 영역으로 레이아웃을 구성하는 5가지 컴포넌트가 있는 게임 애플리케이션 인터페이스입니다. 제작자는 게임 인터페이스를 구성하는 공간을 다음과 같이 나눕니다.

"통계" 영역은 항상 "게임 제목" 바로 아래에 나타납니다.
"게임 보드"는 "통계" 및 "제목" 오른쪽에 나타납니다.
"게임 제목"의 상단과 "게임 보드"는 항상 정렬 되어야 합니다.
"게임 보드"의 하단과 "통계" 영역의 하단은 게임이 최소 높이에 도달하면 정렬됩니다. 다른 모든 경우에 "게임 보드"는 사용할 수 있는 모든 공간을 활용하기 위해 늘어납니다.
"컨트롤"은 게임 보드 중앙에 위치합니다.
"스코어" 영역의 상단은 "컨트롤" 영역의 상단에 정렬됩니다.
"점수" 영역은 "통계" 영역 아래에 있습니다.
"점수" 영역은 "통계" 영역 아래의 "컨트롤"에 정렬됩니다.

요구 조건에 따라 그리드를 사용해 게임 인터페이스를 레이아웃 하는 코드를 살펴보세요.

<div id="grid">
  <div id="title"> 게임 제목 </div>
  <div id="board"> 게임 보드 </div>
  <div id="controls"> 컨트롤 </div>
  <div id="stats"> 통계 </div>
  <div id="score"> 점수 </div>
</div>

#grid {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr;
}

#title    { 
  grid-column: 1; 
  grid-row: 1; 
}
#score    { 
  grid-column: 1; 
  grid-row: 3; 
}
#stats    { 
  grid-column: 1; 
  grid-row: 2; 
  align-self: start; 
}
#board    { 
  grid-column: 2; 
  grid-row: 1 / span 2; 
}
#controls { 
  grid-column: 2; 
  grid-row: 3; 
  justify-self: center; 
}

다양한 기기에서의 화면 최적화

이전 예제를 계속 하면서 게임 인터페이스가 다양한 크기의 화면에서 최적화 되길 원합니다. 뿐만 아니라 세로 또는 가로 방향으로 화면을 볼 때 컴포넌트 레이아웃을 적절하게 배치할 수 있어야 합니다 (아래 그림 참고). 그리드 레이아웃과 미디어 쿼리를 결합 함으로써 제작자는 동일한 시맨틱 마크업으로 코드의 순서와 상관없이 요소의 레이아웃을 재배치 하여 각 방향의 화면 모드에서 원하는 레이아웃을 얻을 수 있습니다.

요구 조건에 따라 그리드를 사용해 게임 인터페이스를 다양한 화면에서 레이아웃 하는 코드는 다음과 같습니다.

<div id="grid">
  <div id="title"> 게임 제목 </div>
  <div id="board"> 게임 보드 </div>
  <div id="controls"> 컨트롤 </div>
  <div id="stats"> 통계 </div>
  <div id="score"> 점수 </div>
</div>

#grid {
  display: grid;
  grid-template-columns: auto 1fr;
}
@media (orientation: portrait) {
  #grid {
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "title stats"
                         "score stats"
                         "board board"
                         "ctrls ctrls";
  }
}

@media (orientation: landscape) {
  #grid {
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "title board"
                         "stats board"
                         "score ctrls";
  }
}

#title    { grid-area: title }
#score    { grid-area: score }
#stats    { grid-area: stats }
#board    { grid-area: board }
#controls { grid-area: ctrls }

그리드 레이아웃의 순서 재배치 기능은 시각적인 화면 렌더링 만 영향을 주며, 소스 순서에 따라 음성 출력 및 내비게이션 합니다. 이를 통해 제작자는 시멘틱 마크업을 그대로 유지한 채, 다양한 화면에서 최적화 된 레이아웃을 제작할 수 있습니다.

그리드 요소 레이아웃 및 재배치를 사용할 경우, 마크업 순서대로 화면에 그려지는 것이 아니기에 문서 접근성 문제가 발생할 수 있음을 주의해야 합니다.

Previous거꾸로 살펴보는 그리드 NextCSS Grid 속성 요약

Last updated 5 years ago