CSS : Grid Layout

목차

1. CSS Grid Layout

2. Grid Container 설정하기
    2-1. 하나하나 입력해서 배치하기

    2-2. 함수 사용해서 자동 배치하기

3. Grid Item 설정하기

4. 영역(Area) 지정과 이름 붙이기

---

1. CSS Grid Layout

CSS Grid Layout은 2차원(행과 열) 기반의 레이아웃 시스템이다.

Flexbox가 1차원 레이아웃에 특화된 반면, Grid는 행과 열을 동시에 제어한다.

 

Grid 용어

용어	설명
Grid Container	display: grid 또는 inlin-grid가 적용된 부모 요소
Grid Item	Grid Container의 자식 요소
Grid Line	행과 열을 구분하는 선 (번호를 가짐)
Grid Track	두 개의 Grid Line 사이의 공간 (= 행/열 한 칸)
Grid Cell	한 행과 열이 만나는 최소 단위 영역
Grid Area	여러 Grid Cell이 모여 만든 직사각형 영역

 

 

---

2. Grid Container 설정하기

1. 하나하나 입력해서 배치하기

우선 container를 어떻게 제작하는지 보기 위해 원하는 행과 열의 cell 사이즈를 직접 입력해보자.

.container {
    display: grid;	/* 또는 inline-grid */
    /* ↓ 3개의 열(columns) 생성: 1열-200px, 2열-1fr(남은 공간중 1단위), 3열-2fr(2의 두배) */
    grid-template-columns: 200px 1fr 2fr;
    /* ↓ 3개의 행(row) 생성: 1행-컨텐츠 높이에 따라 자동, 2행: 100px 고정높이, 3행: 50px 고정높이*/
    grid-template-rows: auto 100px 50px;
    gap: 10px 20px;	/* 행(row)과 열(column) 사이 간격*/
}

예시 코드 결과 화면. 행보다 넘치는 아이템은 auto(default) 높이로 배정된다.

• display: grid → Grid 레이아웃 활성화
• grid-template-columns → 열 크기 지정 (px, %, fr 등의 단위 사용)
  • px, % : 고정 크기, 부모 대비 비율
  • fr(fraction) : 가용 공간의 비율
  • auto : 컨텐츠 크기에 맞춰 자동 조절
  • min-content, max-content, fit-content() 등의 함수도 있음
• grid-template-rows → 행 크기 지정
• gap/row-gap/column-gap → 행과 열 사이 간격 조절

 

하지만 이렇게 하나하나 입력하는 것은 비효율적이다.

그래서 반복을 도와주는 함수가 있다.

 

2. 함수 사용해서 자동 배치하기

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px;
    grid-auto-flow: row dense;
}

 

• repeat(count, value) : 단순 반복 지정. 단순 반복 구조만 가능하다. (ex.repeat(3, 1fr) = 1fr 1fr 1fr)
• minmax([min값], [max값]) : 행과 열의 최소크기, 최대크기를 지정한다.
  grid-template-columns: repeat(3, minmax(200px, 1fr)); → 200보다 줄지 않고, 늘어나면 항상 1:1:1 비율로 늘어남
  
• grid-auto-rows, grid-auto-columns : 명시되지 않은 행/열 크기 지정
• grid-auto-flow : 자동 배치 방향 지정(row, column, dense)

 

 

---

3. Grid Item 설정하기

1. Grid Item 배치 속성

Grid Item은 아래 속성들로 위치와 크기를 지정할 수 있다.

속성	설명
grid-column-start	시작 열 - 번호 또는 이름 지정
grid-column-end	끝 열 - 번호 또는 이름 지정
grid-row-start	시작 행 - 번호 또는 이름 지정
grid-row-end	끝 행 - 번호 또는 이름 지정
grid-column	start / end 축약형
grid-row	start / end 축약형
grid-area	row-start / column-start / row-end / column-end 축약형

보면 전부 행과 열의 시작과 끝의 번호/이름을 붙이는 속성들이다.

 

.item {
    grid-column: 1 / 3;	/* 1열부터 3열 전까지(2열까지) */
    grid-row: 2 / 4; /* 2행부터 4행 전까지(3행까지) */
}

이 아이템은 grid에서 1열부터 3열, 2행부터 4행까지를 차지하는(=병합하는) 아이템이다.

---

4. 영역(Area) 지정과 이름 붙이기

Grid 영역에 이름을 붙이고, 아이템을 이름으로 배치할 수도 있다.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px 200px
    grid-template-areas:
    	"header header header"
        "sidebar main main";
    }
    
    .header { grid-area: header; }
    
    .sidebar { grid-area: sidebar; }
    
    .main { grid-area: main; }

• 동일한 이름을 가진 아이템이 grid-template-areas에서 인접한 위치(가로/세로)에 반복되면 병합도 같이 이루어진다.
• grid-template-areas의 열 수는 일치해야한다.

 

 

참고

codeit