CSS Grid

안녕하세요. 오늘은 CSS Grid에 대해 알아볼게요.

 

 

CSS Grid

Grid는 웹 페이지에서 2차원 레이아웃(행, 열 모두)을 쉽게 설계할 수 있는 CSS 레이아웃 시스템이에요.

 

Grid는 컨테이너(container)와 아이템(item)으로 구성돼요.

 

컨테이너와 아이템이 나오니 딱 생각하는 레이아웃이 있는데요.

 

바로 Flex box에요. 이 두 레이아웃의 차이점은

 

Flex box는 1차원(행 or 열)이지만 Grid는 2차원으로 행 열 모두 다루는 레이아웃이랍니다.

 

다음은 기본 구조 예시와 Grid 단위 표예요.

.container {
  display: grid; /* Grid 활성화 */
  grid-template-columns: 100px 200px 1fr; /* 열 정의 */
  grid-template-rows: 50px 100px;       /* 행 정의 */
  gap: 10px;                             /* 행/열 사이 간격 */
}
.item {
  background-color: lightblue;
}

 

px	고정 크기
%	부모 기준 비율
fr	남는 공간 비율 (1fr = 남는 공간의 1단위)
auto	콘텐츠 크기에 맞춤

 

 

 

Grid 아이템 위치 지정

 

각 아이템들을 특정 행과 열에 배치할 수 있거나 간단하게 사용이 가능해요.

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

/*
grid-column: 시작 / 끝
grid-row: 시작 / 끝
*/


// 간단하게 span
.item1 {
  grid-column: span 2; /* 2열 차지 */
}

 

 

 

영역 이름 지정

 

Grid는 영역 이름을 사용해서 더 직관적으로 배치할 수 있어요.

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

 

 

 

자동 배치

 

grid-auto-rows / grid-auto-columns  사용으로 아이템이 지정되지 않은 경우 자동으로 생성하고,

 

auto-fit / auto-fill 사용으로 반복 패턴을 만들 수 있어요.

 

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

 

 

 

마지막으로 Flex box 포스팅을 보셨다면 게임을 한번 해보셨을 텐데요.

 

Grid도 재밌게 배울 수 있는 게임이 있어요.

 

https://cssgridgarden.com/#ko

Grid Garden

 

 

 

여기까지 CSS Grid에 알아봤는데요.

 

Flex box와 혼동올 수 있으니 꼭 조심하세요!