[CSS] CSS 중급 문법 : 2. 그리드 Grids

Introduction to Grids

✅ CSS로 레이아웃을 구성하는 다양한 방법

웹페이지의 요소를 배치하는 방식에는 정답이 없다.
콘텐츠의 종류와 목적에 따라 다양한 스타일링 기법이 필요하다.

지금까지 배운 Box Model, Display, Positioning, Flexbox는 단일 축(one-dimensional) 기준으로 효율적인 배치를 도와주었다.

✅ CSS Grid란?

CSS Grid는 보다 강력하고 유연한 2차원 레이아웃 시스템이다.

비교 항목	Flexbox	CSS Grid
레이아웃 방향	1차원 (row 또는 column)	2차원 (row + column)
사용 목적	아이템 정렬에 초점	전체 레이아웃 설계에 적합

Flexbox는 요소 간 정렬과 비율 조정에 강하고,
Grid는 페이지 전체 구조를 디자인하는 데 유리하다.

✅ 주요 Grid 속성

속성	설명
grid-template-columns	열(column)의 구조 정의
grid-template-rows	행(row)의 구조 정의
grid-template	행과 열을 한 번에 설정
grid-template-areas	시각적인 영역 이름으로 레이아웃 구성
row-gap / column-gap / gap	행과 열 사이 간격 설정
grid-row-start / grid-row-end	특정 요소가 어디서부터 어디까지 행을 차지할지 지정
grid-column-start / grid-column-end	특정 요소가 어디서부터 어디까지 열을 차지할지 지정
grid-area	영역 이름이나 위치를 통합 지정

Creating a Grid

✅ CSS Grid의 기본 구조

CSS Grid를 사용하려면 먼저 두 가지 구성 요소가 필요하다:

Grid Container (그리드 컨테이너):
- 부모 요소로, 전체 그리드 레이아웃을 구성하는 역할을 한다.
Grid Items (그리드 아이템):
- 컨테이너 내부의 직속 자식 요소들이며, 컨테이너가 정의한 규칙에 따라 배치된다.

✅ 그리드 컨테이너로 지정하기

HTML 요소를 Grid 컨테이너로 전환하려면 display 속성을 아래 중 하나로 설정해야 한다:

값	설명
grid	블록 레벨 그리드 (기본적으로 div 등에 사용)
inline-grid	인라인 레벨 그리드 (span, button 등과 같이 인라인 요소에 적합)

.container {
  display: grid; /* 또는 inline-grid */
}

이렇게 설정하면 해당 요소는 Grid 컨테이너로서 동작하며,
이제부터는 grid-template-columns, grid-template-rows 등 다양한 속성을 활용해
행(Row) 과 열(Column) 을 자유롭게 정의할 수 있게 된다.

Creating Columns

✅ 기본 상태의 Grid는 "한 줄짜리" 구조일 뿐이다

display: grid만 선언하면 기본적으로 하나의 열(column) 만 가진다.
이 상태에서 여러 요소를 넣으면 각 요소가 한 줄씩 아래로 쌓이게 된다.
진짜 '그리드' 형태로 만들기 위해서는 열과 행의 구조를 명시적으로 정의해야 한다.

✅ grid-template-columns: 열의 개수와 너비 정의

grid-template-columns 속성은 열의 개수와 각 열의 너비를 설정하는 데 사용된다.

.grid {
  display: grid;
  width: 500px;
  grid-template-columns: 100px 200px;
}

이 예제에서는 두 개의 열이 생성된다.
- 첫 번째 열: 100px
- 두 번째 열: 200px

각 값은 해당 열의 너비를 의미하며, 값을 추가하면 열 개수가 늘어난다.

✅ 퍼센트(%) 단위 사용

열의 크기를 컨테이너 너비의 비율로 지정할 수도 있다.

.grid {
  display: grid;
  width: 1000px;
  grid-template-columns: 20% 50%;
}

첫 번째 열: 1000px × 0.20 = 200px
두 번째 열: 1000px × 0.50 = 500px

✅ 단위 혼합도 가능

.grid {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 40% 60px;
}

세 개의 열이 생성된다 : 20px, 40%, 60px
총 너비는 20px + 40px + 60px = 120px (컨테이너 너비 100px 초과)
이 경우 레이아웃이 넘치며(overflow) 다른 요소를 침범할 수 있다

Creating Rows

✅ grid-template-rows: 행(Row)의 개수와 높이 정의

이전에는 grid-template-columns로 열의 개수와 너비를 정의했다.
grid-template-rows는 그와 거의 동일하게 행의 개수와 높이를 지정한다.

✅ 사용 예시

.grid {
  display: grid;
  width: 1000px;
  height: 500px;
  grid-template-columns: 100px 200px;
  grid-template-rows: 10% 20% 600px;
}

열 구조: 100px, 200px → 총 2개의 열
행 구조: 10%, 20%, 600px → 총 3개의 행
- 1행: 10% → 500px × 0.10 = 50px
- 2행: 20% → 500px × 0.20 = 100px
- 3행: 600px (고정 크기)

✅ % 단위 계산 방식 주의

열(column): % → 컨테이너의 너비 기준
행(row): % → 컨테이너의 높이 기준

예를 들어, grid-template-rows: 50% 50%는 컨테이너 높이가 400px이라면 각각 200px씩 차지한다.

Grid Template

✅ grid-template: 행과 열을 한 번에 정의

grid-template는 grid-template-rows + grid-template-columns 두 속성을 축약해서 한 줄로 작성할 수 있는 속성이다.

✅ 사용 예시

.grid {
  display: grid;
  width: 1000px;
  height: 500px;
  grid-template: 200px 300px / 20% 10% 70%;
}

/ 앞쪽 값 → 행(Row) 크기 정의
/ 뒤쪽 값 → 열(Column) 크기 정의

위 예시 결과

행(Row): 200px, 300px → 2개의 행
열(Column): 20%, 10%, 70% → 3개의 열

✅ % 단위 주의점

행(Row)에서 %는 그리드 높이 기준
열(Column)에서 %는 그리드 너비 기준

Fraction

✅ fr 단위: CSS Grid 전용 비율 단위

fr은 fraction(분수)의 약자로, 그리드 전체 공간을 일정 비율로 나누어 크기를 설정하는 단위이다.
%, em, rem과 같은 기존 단위와 달리, fr은 CSS Grid 전용으로 설계되었다.

장점은 다음과 같다 :

반응형 레이아웃에 최적화
고정 단위와 혼합 사용 가능
Grid에서 overflow 문제를 줄이는 데 유리

✅ 기본 사용법

.grid {
  display: grid;
  width: 1000px;
  height: 400px;
  grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;
}

행(Row) 설정

전체 높이 400px를 4등분 (2 + 1 + 1 = 4)
1행: 2fr → 200px
2행: 1fr → 100px
3행: 1fr → 100px

열(Column) 설정

전체 너비 1000px를 5등분 (1 + 3 + 1 = 5)
1열: 1fr → 200px
2열: 3fr → 600px
3열: 1fr → 200px행(Row) 설정

✅ 다른 단위와 혼합 가능

fr은 남은 공간을 비율로 나누는 개념이므로, 다른 단위와 함께 쓰면 먼저 고정 크기를 제외한 남는 공간을 비율로 나눈다.

.grid {
  display: grid;
  width: 100px;
  grid-template-columns: 1fr 60px 1fr;
}

2열이 60px 고정
남은 공간 = 100px - 60px = 40px
1열(1fr)과 3열(1fr)이 이를 동등하게 나눔 → 각각 20px

Repeat

✅ repeat() 함수: 반복되는 그리드 정의 간소화

repeat() 함수는 CSS Grid 전용 함수로, grid-template-columns 또는 grid-template-rows 속성에서 같은 패턴의 크기를 반복 지정할 때 사용한다.

✅ 기본 사용법

.grid {
  display: grid;
  width: 300px;
  grid-template-columns: repeat(3, 100px);
}

repeat(3, 100px) → 100px 100px 100px와 동일
열(Column) 3개, 각각 100px 너비

✅ fr 단위와 함께 사용

repeat()은 fr 단위와 조합할 때 특히 유용하다.

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

5개의 열을 동일한 비율(각 1fr)로 나눔
반응형 레이아웃 구성 시 자주 사용됨

✅ 다중 값 반복

repeat()의 두 번째 인자에 여러 값을 지정할 수도 있다.

grid-template-columns: repeat(2, 20px 50px);

총 4개의 열 생성:
- 1열: 20px
- 2열: 50px
- 3열: 20px
- 4열: 50px

즉, (20px, 50px) 패턴을 2번 반복하는 효과

minmax

✅ minmax() : 최소최대 크기 제한하기

지금까지 만든 그리드는 고정 크기였지만, 실제 웹페이지에서는 브라우저 크기에 따라 그리드가 유동적으로 변하는 반응형 구조를 원할 때가 많다.

이때, 특정 열이나 행이 너무 작아지거나 너무 커지는 것을 방지하려면 minmax() 함수를 사용할 수 있다.

이를 통해 반응형 레이아웃에서 요소 크기 안정성을 확보하고, 최소최대 크기 범위 지정으로 디자인 일관성을 유지할 수 있다.

✅ 기본 사용법

.grid {
  display: grid;
  grid-template-columns: 100px minmax(100px, 500px) 100px;
}

1열: 100px 고정
2열: minmax(100px, 500px) → 최소 100px, 최대 500px
3열: 100px 고정

✅ 동작 방식

브라우저가 줄어들면 2열은 최소 100px까지 줄어든다.
브라우저가 늘어나면 2열은 최대 500px까지만 확장된다.
그 이상 크기 변화는 주변 열에 영향을 미친다.

✅ 활용 예시

이미지 크기 제한 → minmax(150px, 1fr)
(이미지가 너무 작아지지 않도록 하면서, 남는 공간을 비율로 분배)
카드 레이아웃 → repeat(auto-fill, minmax(200px, 1fr))
(화면 크기에 맞춰 카드 개수가 자동 조정되며, 최소 크기 유지)

Grid Gap

✅ 그리드 간격(gap) 설정하기

지금까지 만든 Grid는 셀과 셀 사이에 간격이 없는 형태였다.

row-gap과 column-gap 속성을 사용하면 행과 열 사이에 여백을 줄 수 있다.

장점은 다음과 같다 :

레이아웃 가독성 향상
padding/margin 없이 간격 제어 가능
간단한 문법으로 유지보수 용이

✅ 기본 예시

.grid {
  display: grid;
  width: 320px;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px; /* 열 사이 간격 */
}

열(column) 간격: 10px
Grid 너비: 320px
간격(10px × 2) = 20px 차감 → 남은 공간 300px
1fr씩 3등분 → 각 열은 100px 너비

중요: gap은 그리드 시작과 끝에는 적용되지 않고, 행/열 사이에만 공간이 생긴다

✅ gap 속성 : 행/열 간격 동시 설정

.grid {
  display: grid;
  width: 320px;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 10px; /* 행 간격, 열 간격 */
}

첫 번째 값 → 행(row) 간격
두 번째 값 → 열(column) 간격
하나의 값만 주면 행과 열 모두 동일 간격 적용

✅ 주의 사항

과거에는 grid-row-gap, grid-column-gap, grid-gap을 사용했으나, 현재는 gap 속성이 표준.
gap은 Flexbox에서도 사용 가능 → 통일된 간격 설정 방법

Grid Items

✅ 기본 상태의 Grid 아이템

지금까지 만든 예시에서는

그리드 컨테이너의 행(Row)과 열(Column)을 명시적으로 정의했고,
각 그리드 아이템은 정확히 한 칸(셀) 만 차지했다.

하지만, Grid 아이템은 반드시 한 칸만 차지해야 하는 것은 아니다.
원한다면 하나의 아이템이 여러 행 또는 여러 열을 동시에 차지하게 만들 수 있다.

✅ 아이템이 여러 칸을 차지하는 경우

특정 아이템이 가로로 2칸 이상 또는 세로로 2칸 이상 차지 가능
이를 통해 강조 영역이나 복합적인 레이아웃 구성 가능
예시: 아이템 A, B, C, E가 두 개 이상의 행(Row)을 차지하는 형태

Multiple Row Items

✅ grid-row-start & grid-row-end: 아이템을 여러 행에 걸쳐 배치

이 두 속성은 그리드 아이템의 세로 방향(행) 범위를 지정하는 데 사용된다.
컨테이너가 아닌 그리드 아이템 자체에 적용하는 속성이다.

✅ 기본 사용 예시

.item {
  grid-row-start: 1;
  grid-row-end: 3;
}

.item은 1번 행에서 시작해 3번 행 직전까지 차지
결과적으로 행 1, 2를 점유 → 2행 높이를 가지게 됨

✅ 그리드 라인(Grid Line) 이해하기

행(row)과 열(column)에는 각각 그리드 라인 번호가 존재
행 라인은 1번부터 시작해,
마지막 라인 번호 = 행 개수 + 1
예: 5행 → 라인 번호 1 ~ 6
예: 8행 → 라인 번호 1 ~ 9

✅ 여러 행 차지 예시

.item {
  grid-row-start: 2;
  grid-row-end: 5;
}

2번 라인에서 시작 → 5번 라인 직전까지 차지
즉, 행 2, 3, 4를 점유 (총 3행 높이)

✅ 응용 사항

grid-row-start 값이 grid-row-end보다 클 수도 있음
음수 값 사용 가능 (-1은 마지막 라인)
span 키워드로 간단히 표현 가능
예: grid-row: 2 / span 3; → 2번 라인부터 3행 차지

Grid Row

✅ grid-row : grid-row-start + grid-row-end 축약형

grid-row 속성은 grid-row-start와 grid-row-end를 한 줄에 함께 작성할 수 있는 축약형 문법이다.

✅ 기본 사용 예시

/* 개별 속성 사용 */
.item {
  grid-row-start: 4;
  grid-row-end: 6;
}

/* 축약형 사용 */
.item {
  grid-row: 4 / 6;
}

4 / 6 → 4번 라인에서 시작, 6번 라인 직전까지 차지
결과적으로 행 4, 5를 점유
종료 라인 번호는 exclusive(포함되지 않음)

✅ 문법 구조

grid-row: [시작 라인 번호] / [종료 라인 번호];

시작 라인 번호 → / 앞에 작성
종료 라인 번호 → / 뒤에 작성

✅ Gap 포함 규칙

여러 행/열을 span 할 경우 gap 간격도 포함
예:
- 각 행 높이: 100px
- 행 간격(row-gap): 10px
- grid-row: 1 / 3 → 높이 = 100px + 10px + 100px = 210px

Grid Column

✅ grid-columns-start, grid-column-end, grid-column

행 배치에 사용했던 grid-row-start, grid-row-end, grid-row와 동일하게 열(Column) 배치에도 다음 속성을 사용할 수 있다.

grid-column-start → 시작할 열 라인 번호
grid-column-end → 끝낼 열 라인 번호 (+1)
grid-column → 위 두 속성의 축약형

✅ 기본 사용 예시

.item {
  grid-column: 4 / 6;
}

4번 라인에서 시작 → 6번 라인 직전까지 차지
결과적으로 열 4, 5를 점유

✅ span 키워드 사용

span 키워드는 길이(칸 수) 기준으로 배치할 때 유용하다.
종료 라인 번호를 직접 계산하지 않아도 된다.

/* 열 4에서 시작해 2칸 차지 */
.item {
  grid-column: 4 / span 2;
}

동일한 결과를 만드는 방법 :

.item {
  grid-column: 4 / 6;
}

.item {
  grid-column-start: 4;
  grid-column-end: span 2;
}

.item {
  grid-column-start: span 2;
  grid-column-end: 6;
}

✅ span 키워드 장점

off-by-one 오류 방지
(종료 라인 번호를 계산할 필요 없음)
시작 라인과 차지할 칸 수만 알면 간단하게 작성 가능
행(grid-row) 속성에도 동일하게 사용 가능

Grid Area

✅ grid-area : 행과 열의 시작·끝을 한 번에 지정

grid-area 속성은 grid-row-start, grid-column-start, grid-row-end, grid-column-end 네 가지 속성을 한 줄로 작성할 수 있는 축약형이다.

✅ 문법 구조

grid-area: [grid-row-start] / [grid-column-start] / [grid-row-end] / [grid-column-end];

✅ 사용 예시

.item {
  grid-area: 2 / 3 / 4 / span 5;
}

행(Row)
- 시작: grid-row-start: 2 → 2번 행 라인에서 시작
- 끝: grid-row-end: 4 → 4번 라인 직전까지 차지 (행 2, 3 포함)
열(Column)
- 시작: grid-column-start: 3 → 3번 열 라인에서 시작
- 끝: grid-column-end: span 5 → 시작 지점에서 5칸 차지 (열 3~7 포함)

✅ 장점

한 줄로 행과 열의 위치를 모두 지정 가능
span 키워드와 조합해 간결한 코드 작성 가능
정확한 위치 지정에 용이 → 디자인 시 레이아웃 배치를 직관적으로 제어 가능

✅ 예시 비교

/* 개별 속성 사용 */
.item {
  grid-row-start: 2;
  grid-column-start: 3;
  grid-row-end: 4;
  grid-column-end: span 5;
}

/* 동일한 결과를 만드는 grid-area 축약형 */
.item {
  grid-area: 2 / 3 / 4 / span 5;
}

Grid Template Areas

✅ grid-template-areas : 레이아웃에 이름 붙이기

grid-template-areas 속성은 그리드 컨테이너에서 각 영역에 이름을 부여하고, 이를 기반으로 레이아웃을 정의할 수 있게 해준다.
이름은 grid-area 속성을 통해 그리드 아이템과 매칭된다.

✅ 사용 예시

<div class="container">
  <header>Welcome!</header>
  <nav>Links!</nav>
  <section class="info">Info!</section>
  <section class="services">Services!</section>
  <footer>Contact us!</footer>
</div>

.container {
  display: grid;
  max-width: 900px;
  margin: auto;
  grid-template-areas: 
    "header header"
    "nav nav" 
    "info services"
    "footer footer";
  grid-template-rows: 300px 120px 800px 120px;
  grid-template-columns: 1fr 3fr; 
}

header   { grid-area: header; } 
nav      { grid-area: nav; } 
.info    { grid-area: info; } 
.services{ grid-area: services; }
footer   { grid-area: footer; }

✅ 코드 해석

grid-template-areas
- 큰따옴표 안의 단어는 영역 이름
- "header header" → 첫 번째 행, 2열을 모두 header 영역으로 사용
- "info services" → 세 번째 행은 왼쪽은 info, 오른쪽은 services
grid-template-rows
- 각 행의 높이를 순서대로 지정: 300px, 120px, 800px, 120px
grid-template-columns
- 열 너비 비율: 1fr : 3fr → 왼쪽 1/4, 오른쪽 3/4
grid-area
- 각 요소에 할당된 영역 이름을 매칭
- 예: header 태그 → grid-area: header;

✅ 시각적 구조

+-----------------+-------------------------+
|      header     |          header          |
+-----------------+-------------------------+
|       nav       |           nav            |
+-----------------+-------------------------+
|      info       |        services          |
+-----------------+-------------------------+
|      footer     |          footer          |
+-----------------+-------------------------+

✅ 장점

코드 가독성 ↑ → 영역 이름만 봐도 레이아웃 구조 파악 가능
유지보수 편리 → 영역 변경 시 HTML 구조 수정 없이 CSS에서만 조정 가능
반응형 레이아웃 설계에 유리

Overlapping Elements

✅ CSS Grid에서 겹치기(Overlapping)

CSS Grid를 사용하면 레이아웃 요소를 손쉽게 겹칠 수 있다.
이때 grid-area 속성을 사용해 행(row)과 열(column)의 시작·끝 위치를 지정하고, z-index를 이용해 어떤 요소가 위로 올라올지 조정한다.

✅ 예제 코드

<div class="container">
  <div class="info">Info!</div> 
  <img src="#" />
  <div class="services">Services!</div>
</div>

.container {
  display: grid;
  grid-template: repeat(8, 200px) / repeat(6, 100px);
}

.info {
  grid-area: 1 / 1 / 9 / 4; /* 1~8행, 1~3열 */
}

.services {
  grid-area: 1 / 4 / 9 / 7; /* 1~8행, 4~6열 */
}

img {
  grid-area: 2 / 3 / 5 / 5; /* 2~4행, 3~4열 */
  z-index: 5; /* 이미지가 위로 올라오도록 */
}

✅ 코드 해석

그리드 설정
- 행(Row): 200px 높이 × 8개
- 열(Column): 100px 너비 × 6개

.info
- grid-area: 1 / 1 / 9 / 4
- 행 시작: 1
- 열 시작: 1
- 행 끝: 9 → 1~8행 차지
- 열 끝: 4 → 1~3열 차지
.services
- grid-area: 1 / 4 / 9 / 7
- 1~8행, 4~6열 차지
img
- grid-area: 2 / 3 / 5 / 5
- 2~4행, 3~4열 차지
- z-index: 5 → 이미지가 다른 두 요소 위로 보임

✅ 시각적 구조

[ info info info | services services services ]
[ info info img  | img      services services ]
[ info info img  | img      services services ]
[ info info img  | img      services services ]
...

✅ 주요 포인트

grid-area로 행·열의 시작과 끝을 모두 지정해 위치·크기 결정
z-index로 겹쳤을 때 우선순위 조정
Grid를 사용하면 포지션(position: absolute) 없이도 겹치는 배치 가능

Justify Items

✅ 2차원 Grid 레이아웃과 justify-items 속성

CSS Grid 레이아웃은 2차원(행과 열) 기반의 배치 방식을 제공한다.

컬럼 축(column/block axis): 페이지의 위에서 아래로 뻗는 축
로우 축(row/inline axis): 페이지의 왼쪽에서 오른쪽으로 뻗는 축

이 축 개념을 기반으로, justify-items 속성은 행 축(가로 방향)에서 그리드 아이템을 정렬한다.
이 속성은 그리드 컨테이너에 선언하며, 다음 값을 가진다. :

값	설명
start	아이템을 그리드 영역의 왼쪽에 정렬
end	아이템을 그리드 영역의 오른쪽에 정렬
center	아이템을 그리드 영역의 중앙에 정렬
stretch	아이템을 그리드 영역을 가득 채우도록 늘림(기본값)

✅ 예시 코드

<main>
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</main>

main {
  display: grid;
  grid-template-columns: repeat(3, 400px);
  justify-items: center;
}

main은 3개의 컬럼(각 400px)으로 구성된 그리드 컨테이너이다.
.card 요소들은 너비가 지정되지 않아 기본적으로 컬럼 폭(400px)을 채운다.
justify-items: center;를 설정하면, .card 요소들이 각 컬럼의 중앙에 정렬되며, 콘텐츠 크기만큼만 너비를 차지한다.
.card에 명시적으로 너비를 지정하면, 그 크기대로 가운데 배치된다.

Justify Content

✅ justify-content 속성

justify-content는 그리드 전체를 가로축(로우 축)에서 배치하는 속성이다.
그리드 컨테이너에 선언하며, 그리드 아이템이 아닌 그리드 자체의 위치를 조정한다.

✅ 주요 값

값	설명
start	그리드를 컨테이너의 왼쪽에 정렬
end	그리드를 컨테이너의 오른쪽에 정렬
center	그리드를 컨테이너 중앙에 정렬
stretch	그리드를 가로 방향으로 늘려 컨테이너를 가득 채움
space-around	각 아이템의 양 옆에 동일한 여백을 배치. 아이템 사이의 간격이 양 끝보다 2배 넓어짐
space-between	아이템 사이의 간격만 동일하게 두고 양 끝에는 여백 없음
space-evenly	아이템과 양 끝 사이의 간격을 모두 동일하게 배치

✅ 예시 코드

<main>
  <div class="left">Left</div>
  <div class="right">Right</div>
</main>

main {
  display: grid;
  width: 1000px;
  grid-template-columns: 300px 300px;
  grid-template-areas: "left right"; 
  justify-content: center;
}

main은 가로 1000px의 그리드 컨테이너이다.
컬럼은 300px씩 2개만 지정되어, 총 600px을 차지하고 나머지 400px은 비어 있다.
justify-content: center;는 이 600px의 그리드를 중앙 정렬하여, 좌우에 각각 200px의 여백이 생기도록 한다.

Align Items

✅ align-items 속성

align-items는 그리드 아이템을 세로축(컬럼 축)에서 배치하는 속성이다.
그리드 컨테이너에 선언하며, 그리드 아이템의 세로 정렬을 결정한다.

✅ 주요 값

값	설명
start	아이템을 그리드 영역의 위쪽에 정렬
end	아이템을 그리드 영역의 아래쪽에 정렬
center	아이템을 그리드 영역의 세로 중앙에 정렬
stretch	아이템을 늘려서 그리드 영역의 높이를 가득 채움

✅ 예시 코드

<main>
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</main>

main {
  display: grid;
  grid-template-rows: repeat(3, 400px);
  align-items: center;
}

main은 3개의 행이 각각 400px 높이로 구성된 그리드 컨테이너이다.
.card 요소는 높이를 지정하지 않았기 때문에 기본적으로 행의 높이(400px)를 모두 차지한다.
align-items: center;를 사용하면 .card가 세로 중앙에 위치하며, 필요한 높이만큼만 차지한다.
.card에 고정 높이를 지정하면 stretch 값을 사용하더라도 행 전체 높이로 늘어나지 않는다.

Align Content

✅ align-content 속성

align-content는 그리드 전체의 행(Row) 배치를 세로축(컬럼 축)에서 조정하는 속성이다.
그리드 컨테이너에 선언하며, 여러 행을 전체적으로 위·아래로 정렬할 때 사용한다.

✅ 주요 값

값	설명
start	행들을 컨테이너 위쪽에 정렬
end	행들을 컨테이너 아래쪽에 정렬
center	행들을 컨테이너 세로 중앙에 정렬
stretch	행들을 늘려서 컨테이너의 세로 공간을 가득 채움
space-around	각 행 양쪽에 동일한 여백을 배치 (행 사이 간격이 양끝보다 2배 넓음)
space-between	행 사이 간격을 동일하게 하고 양끝에는 여백 없음
space-evenly	행 사이와 양끝 간격을 모두 동일하게 설정

✅ 예시 코드

<main>
  <div class="top">Top</div>
  <div class="bottom">Bottom</div>
</main>

main 컨테이너 높이는 600px이다.
지정된 행은 각 200px로 총 400px만 차지한다.
align-content: center;를 사용하면 남는 200px 공간이 위와 아래로 균등하게 분배되어, 위·아래 각각 100px 여백이 생긴다.
이 속성은 여러 행이 있을 때만 동작하며, 단일 행에서는 효과가 없다.

Justify Self and Align Self

✅ justify-self & align-self 속성

justify-items와 align-items는 그리드 컨테이너 전체에 속한 모든 아이템의 정렬 방식을 지정한다.

반면, justify-self와 align-self는 개별 아이템 단위에서 정렬을 지정하며, 선언된 경우 해당 아이템은 부모의 설정(justify-items, align-items)을 덮어 쓴다.

✅ justify-self

수평축(행 축, row axis)에서 개별 아이템의 정렬을 지정
컨테이너의 justify-items 값을 아이템 단위로 무시하고 새로운 정렬 적용

✅ align-self

수직축(열 축, column axis)에서 개별 아이템의 정렬을 지정
컨테이너의 align-items 값을 아이템 단위로 무시하고 새로운 정렬 적용

✅ 공통 값

값	설명
start	아이템을 영역의 왼쪽(수평) / 위쪽(수직)에 배치
end	아이템을 영역의 오른쪽(수평) / 아래쪽(수직)에 배치
center	아이템을 영역 중앙에 배치
stretch (기본값)	아이템을 영역 크기에 맞게 늘림

✅ 예시 코드

<main>
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</main>

main {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(2, 200px);
  justify-items: center; /* 기본 수평 정렬 */
  align-items: center;   /* 기본 수직 정렬 */
}

.item2 {
  justify-self: end; /* 부모 설정 무시, 오른쪽 정렬 */
  align-self: start; /* 부모 설정 무시, 위쪽 정렬 */
}

justify-items, align-items → 전체 아이템 정렬
justify-self, align-self → 특정 아이템 개별 정렬
개별 설정이 전체 설정보다 우선 적용됨

Implicit vs. Explicit Grid

✅ Implicit Grid 암시적 그리드

지금까지는 다양한 속성을 사용해 그리드의 행(row)과 열(column)의 개수 및 크기를 명시적으로 정의해왔다.
이 방식은 항상 고정된 양의 콘텐츠를 보여주는 랜딩 페이지 같은 경우에 적합하다.

그러나 출력되는 콘텐츠의 양을 미리 알 수 없는 경우에는 문제가 생길 수 있다.

✅ 암시적 그리드 동작

이럴 때 CSS Grid의 "암시적 그리드(Implicit Grid)"가 자동으로 작동한다.
암시적 그리드는 명시적으로 정의되지 않은 셀을 자동으로 생성하여 남는 콘텐츠를 배치하는 기능이다.

기본 동작
1. 행(row)을 먼저 채운다.
2. 부족하면 새로운 행을 자동으로 추가한다.
3. 새로 생성된 행의 높이는 그 행의 콘텐츠 크기에 맞춰진다.

✅ 정리

명시적 그리드(Explicit Grid): CSS에서 직접 정의한 행·열 레이아웃
암시적 그리드(Implicit Grid): 남는 콘텐츠를 자동으로 배치하기 위해 생성되는 행·열
기본 설정: 행 우선 배치 → 필요 시 새 행 생성 → 콘텐츠 높이에 맞춤

Grid Auto Rows and Grid

✅ 암시적 그리드 크기 제어 - grid-auto-rows, grid-auto-columns

CSS Grid에서는 명시적으로 정의한 행·열을 초과하는 콘텐츠가 있을 경우, 자동으로 암시적 그리드(implicit grid)를 생성하여 배치한다.
이때 추가로 생성되는 행과 열의 크기는 다음 속성으로 지정할 수 있다.

✅ 속성 설명

속성	설명	예시 값
grid-auto-rows	암시적으로 생성되는 행의 높이 지정	100px, 50%, 1fr, repeat(2, 100px)
grid-auto-columns	암시적으로 생성되는 열의 너비 지정	150px, 20%, 2fr, repeat(3, 1fr)

✅ 특징

값 형식은 grid-template-rows / grid-template-columns와 동일하다.
미설정 시, 크기는 콘텐츠 크기에 맞춰 자동 조정된다.

✅ 예제 코드

<body>
  <div>Part 1</div>   
  <div>Part 2</div>
  <div>Part 3</div>
  <div>Part 4</div>
  <div>Part 5</div>
</body>

body {
  display: grid;
  grid: repeat(2, 100px) / repeat(2, 150px); 
  grid-auto-rows: 50px;
}

2행 × 2열(총 4셀) 그리드를 명시적으로 정의
실제 <div> 개수는 5개 → 초과된 요소는 암시적 행에 배치
grid-auto-rows: 50px 설정 → 암시적 행 높이는 50px로 고정

Grid Auto Flow

✅ 암시적 그리드 요소 배치 순서 - grid-auto-flow

grid-auto-flow는 암시적으로 추가되는 요소가 행(Row) 또는 열(Column) 기준으로 채워질지, 그리고 배치 시 빈 공간을 채울지(dense) 여부를 지정하는 속성이다.

✅ 속성 값

값	설명
row	왼→오 순서로 행을 채우고, 부족하면 새 행 생성 (기본값)
column	위→아래 순서로 열을 채우고, 부족하면 새 열 생성
dense	빈 셀을 우선적으로 채우는 배치 알고리즘 적용
조합	row dense, column dense 형태로 사용 가능

✅ 예제 코드

<body>
    <div class="box">Part 1</div>   
    <div class="box">Part 2</div>
    <div class="box">Part 3</div>
    <div class="box">Part 4</div>
    <div class="box">Part 5</div>
</body>

body {
  display: grid;
  gap: 5px;
  grid: repeat(2, 100px) / repeat(2, 150px);
  grid-auto-rows: 45px;
  grid-auto-columns: 65px;
  grid-auto-flow: column;
}

명시적 그리드: 2행 × 2열 → 총 4셀
요소 5개 중 마지막 요소(Part 5)는 암시적 열에 배치됨
grid-auto-columns: 65px 설정으로 해당 열의 너비는 65px
grid-auto-flow: column → 기존 행 높이(100px) 유지, 열 방향으로 요소 배치

참고

https://www.codecademy.com/enrolled/courses/learn-intermediate-css

Introduction to Grids

Creating a Grid

Creating Columns

Creating Rows

Grid Template

Fraction

Repeat

minmax

Grid Gap

Grid Items

Multiple Row Items

Grid Row

Grid Column

Grid Area

Grid Template Areas

Overlapping Elements

Justify Items

Justify Content

Align Items

Align Content

Justify Self and Align Self

Implicit vs. Explicit Grid

Grid Auto Rows and Grid

Grid Auto Flow

티스토리툴바