CSS Grid로 복잡한 레이아웃 쉽게 만들기

CSS Grid는 웹디자인에서 복잡한 2차원 레이아웃을 간단하고 효율적으로 구현할 수 있는 강력한 도구입니다. 이전에는 Flexbox, float, 또는 inline-block과 같은 기술을 조합해야만 가능했던 레이아웃 작업을 CSS Grid를 통해 더 직관적으로 처리할 수 있습니다.

 

 

 

1. CSS Grid란?

CSS Grid는 행(row)과 열(column)을 기반으로 요소를 배치하는 레이아웃 시스템입니다. Flexbox가 1차원 레이아웃(행 또는 열 중 하나)에 적합한 반면, CSS Grid는 2차원 레이아웃(행과 열을 동시에)에서 강력한 유용성을 제공합니다.

 

2. CSS Grid의 기본 문법

 

1) display: grid;

CSS Grid를 활성화하려면 부모 요소(컨테이너)에 display: grid를 설정합니다.

.container {
  display: grid;
}

 

2) 행과 열 정의: grid-template-rows, grid-template-columns

- grid-template-rows: 행의 높이를 정의.
- grid-template-columns: 열의 너비를 정의.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3개의 동일한 열 */
  grid-template-rows: 100px auto; /* 첫 번째 행은 100px, 두 번째 행은 자동 크기 */
}

 

 

3) 요소 배치

- grid-column: 열의 시작과 끝 위치.
- grid-row: 행의 시작과 끝 위치.

.item1 {
  grid-column: 1 / 3; /* 첫 번째부터 두 번째 열까지 */
  grid-row: 1 / 2; /* 첫 번째 행 */
}

 

 

3. 주요 속성 소개

 

1) repeat()

repeat()를 사용하면 동일한 크기의 행이나 열을 반복적으로 정의할 수 있습니다.

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4개의 동일한 열 */
}

 

 

2) gap

행과 열 사이의 간격을 설정합니다.

.container {
  display: grid;
  gap: 20px; /* 행과 열 사이에 20px 간격 */
}

 

 

3) grid-auto-rows, grid-auto-columns

자동으로 생성되는 행과 열의 크기를 설정합니다.

.container {
  display: grid;
  grid-auto-rows: 150px; /* 생성되는 행의 높이를 150px로 설정 */
}

 

 

4) area를 활용한 배치

grid-template-areas를 사용해 레이아웃의 영역을 이름으로 정의할 수 있습니다.

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

 

 

 

4. CSS Grid의 장점

 

1) 복잡한 레이아웃도 간단하게 구현

행과 열을 동시에 관리하여 복잡한 구조를 쉽게 처리.

 

2) 코드 간결성

기존 방식보다 코드가 훨씬 간단하며 유지보수가 용이.

 

3) 반응형 디자인 지원

미디어 쿼리와 함께 사용해 다양한 화면 크기에서도 최적화 가능.

 

 

 

5. CSS Grid와 Flexbox의 차이점

특징	CSS Grid	Flexbox
레아이웃 방식	2차원(행과 열 동시)	1차원(행 또는 열 중 하나)
배치의 자유도	요소를 특정 위치에 배치 가능	요소 순서 조정이 유연함
적합한 용도	페이지 레이아웃, 복잡한 그리드 구현	간단한 정렬, 버튼 그룹 등

 

 

 

6. CSS Grid는 현대 웹디자인에서 복잡한 2차원 레이아웃을 구현하는 데 필수적인 도구입니다. 직관적인 문법과 유연한 배치를 통해 이전보다 간단하게 고급스러운 레이아웃을 만들 수 있습니다. 와 Flexbox의 차이점