kind: capsule status: active visibility: private license: CC-BY-SA-4.0 summary: CSS Grid 실무 2대 패턴 — 그리드 안에서 중앙정렬 (align-items/justify-items + align-self/justify-self) + 자동 최소 크기 해제 (min-width: 0). tags: - css - css-grid - layout - capsule

CSS Grid Patterns Capsule

Summary#

Grid 에서 정렬은 container level (align-items / justify-items) vs item level (align-self / justify-self) 두 범위로 나뉜다. Grid 아이템이 콘텐츠 때문에 넘치면 min-width: 0 으로 auto 최소 크기를 풀어준다.

Claim#

Grid 구조 개념#

container → items → content

align-items / justify-items: container 가 모든 items 의 정렬 결정
align-self / justify-self: 개별 item 이 자신만 재정의
Grid 속성은 parent–child 한 단계만 작동 (subgrid 제외)

1. 아이템을 셀 중앙으로#

/* 모든 item */
.grid {
  display: grid;
  place-items: center;          /* = align-items + justify-items */
}

/* 개별 item */
.grid-item {
  place-self: center;           /* = align-self + justify-self */
}

2. 콘텐츠(텍스트)를 셀 안에서 중앙정렬#

.grid-item {
  display: flex;                /* item 내부를 다시 flex 로 */
  align-items: center;
  justify-content: center;
}

또는 아이템 자체를 grid 로 한 번 더.

3. 아이템이 콘텐츠 때문에 넘치는 문제#

.grid-item {
  min-width: 0;
  min-height: 0;
  /* 또는 overflow: hidden; */
}

원리: Grid 아이템 기본값은 min-width: auto = "콘텐츠보다 작아질 수 없음". 긴 텍스트 한 줄이 있으면 컬럼 1fr 제약을 무시하고 확장 → 레이아웃 파괴. min-width: 0 또는 overflow: visible 이외 값으로 auto 최소 크기 해제.

4. 대칭 트랙 레이아웃#

.grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  min-height: 0;                /* 필수 — 아이템 컨테이너가 flex 내부일 때 */
}

Scope#

CSS Grid Level 1 — 모든 현대 브라우저 (Chrome 57+, Firefox 52+, Safari 10.1+).
subgrid (Firefox 71+, Safari 16+, Chrome 117+) — 2024 시점 Baseline 진입.

Caveats#

min-width: 0 이슈는 flexbox 와 완전 동일한 메커니즘 — flex-item 도 같음.
1fr 은 "남은 공간의 비율" 이지 "절대 폭" 이 아님. minmax(0, 1fr) 가 더 안전.
place-items / place-self 는 두 값 전달 시 align 먼저, justify 나중 (block-axis inline-axis).

Source#

Stack Overflow Q: Centering in CSS Grid
Accepted Answer: https://stackoverflow.com/a/45599428 — by Michael Benjamin
License: CC BY-SA 4.0 (Stack Exchange user contributions)
조회일: 2026-04-19

Supplementary: - Michael Benjamin — Prevent content from expanding grid items (동일 저자, min-width: 0 패턴)

Sagwan Revalidation 2026-04-18T21:12:25Z#

verdict: ok
note: CSS Grid 정렬 속성·min-width:0 패턴·place-items/place-self 단축 속성 모두 현행 표준과 일치하며 낡은 내용 없음.