암묵적 vs 명시적 Grid: 트랙이 자동으로 나타날 때

"할 수 있는 거 정의해. 나머지는 grid 가 figure out 하게. Auto-flow 규칙이 스케일하는 grid 와 깨지는 grid 의 차이."

명시적 Grid

명시적 grid 는 grid-template-rows 와 grid-template-columns 로 선언하는 것. grid-template-columns: repeat(3, 1fr) 가 명시적 column 트랙 3 개 생성. grid-template-rows: 100px 100px 가 명시적 row 트랙 2 개 생성.

암묵적 Grid

명시적 grid 가 들 수 있는 것보다 항목이 많으면, grid 가 자동으로 새 트랙 추가 — 이게 암묵적 트랙. grid-template-columns: repeat(3, 1fr) 와 항목 7 개 가진 grid 가 column 3 (명시적) 과 row 3 (7 번째 항목용 하나 암묵적 — row 3 에는 항목 하나만) 만듦.

암묵적 트랙 sizing 은 이걸로 제어:

grid-auto-rows — 암묵적 row 크기. 기본 auto (content 크기).
grid-auto-columns — 암묵적 column 크기. 기본 auto.

대부분 layout 은 명시적 grid overflow 시 새 row 를 균일하게 sizing 하려 grid-auto-rows: 200px 또는 minmax(120px, auto) 만 필요.

`grid-auto-flow`: 항목이 스스로 배치되는 방법

Auto-placement 가 항목이 어디 land 할지 결정. grid-auto-flow 가 전략 설정:

row (기본) — row 를 left-to-right, top-to-bottom 채움. Row 가 full 이면 새 row 시작.
column — column 을 top-to-bottom, left-to-right 채움. Column 이 full 이면 새 column 시작.
row dense 또는 column dense — 위와 같지만, grid 가 hole 을 backfill. 항목 5 가 2 column span 하고 현재 row 에 fit 안 되면, 기본 flow 가 hole 남김; dense 가 그 hole 에 더 작은 늦은 항목 pack.

Masonry 같은 layout 용 dense packing

다양한 크기 카드 가지면 (일부는 1 column span, 일부는 2 column), grid-auto-flow: dense 가 작은 항목이 큰 항목이 남긴 갭 채우는 타이트한 masonry 같은 packing 만듦. Trade-off: 항목이 시각적으로 source 순서로 안 나타날 수 있어.

dense 가 source 순서 안 바꾸고 시각 출력 재정렬. 항목이 의미 있는 시퀀스 안 가질 때 (사진 grid, 서사 순서 없는 카드 리스트) OK. Source 순서가 읽기 순서일 때 (검색 결과 리스트, timeline) 해로움. 일반 layout 이 아니라 시각 완전성에 dense 써.

`span` 과 결합

Auto-placement 가 개별 항목의 span 존중. 카드의 grid-column: span 2 가 그 카드를 2 column 너비로; auto-flow 가 거기에 맞춰 배치:

`subgrid` feature

subgrid 가 중첩 grid 로 하여금 부모의 트랙 정의 상속하게. Header, body, footer 가진 카드가 sibling 카드의 header, body, footer 와 정렬되어야 할 때 유용 — 각 카드가 자기 grid template 갖지 않고.

subgrid 가 모던 브라우저에 widely supported (baseline 2023). 카드 간 정렬 필요할 때 써; 아니면 자기 template 가진 중첩 grid 가 더 단순.

피파의 노트

cwk-site 이미지 갤러리가 1x1 과 2x1 사진 섞어 grid-auto-flow: dense 사용. Dense packing 이 사진 순서 무관 갤러리가 보이는 hole 없음 — 작은 사진들이 큰 사진들이 남긴 갭에 자동 slot. 사진이 여전히 업로드 순서로 작성; 시각 배치만 재정렬. 갤러리에는 읽기 순서가 안 중요해서 dense 가 맞는 trade-off.

Code

명시적 + 암묵적 트랙·css

/* 명시적 + 암묵적 상호작용 */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 명시적 column 3 */
  grid-template-rows: 100px 200px;          /* 명시적 row 2 */
  grid-auto-rows: 150px;                    /* 암묵적 row: 각자 150px */
  gap: 1rem;
}

/* 이 grid 에 항목 9 개 놓으면:
   - 첫 6 항목이 명시적 3x2 grid 채움
   - 항목 7-9 가 암묵적 3 번째 row 에 land, 각자 150px 높이
*/

/* Row 가 minimum 가지고 content 로 크기 잡길 원하면: */
.grid {
  grid-auto-rows: minmax(120px, auto);
}

세 auto-flow 모드·css

/* grid-auto-flow: row vs column vs dense */

.row-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;            /* 기본 — row 채우고 wrap */
  gap: 1rem;
}

.column-flow {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-auto-flow: column;          /* column 채우고 wrap */
  gap: 1rem;
}

.dense-pack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;       /* 더 작은 항목으로 갭 채움 */
  grid-auto-rows: 100px;
  gap: 1rem;
}

.dense-pack .wide { grid-column: span 2; }   /* 일부 항목이 2 너비 */
.dense-pack .tall { grid-row: span 2; }       /* 일부가 2 높이 */

subgrid — 카드 간 정렬·css

/* subgrid — 자식이 부모의 트랙 상속 */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;        /* heading | body | footer */
  gap: 1rem;
}

.cards .card {
  display: grid;
  grid-template-rows: subgrid;              /* 부모의 row 트랙 사용 */
  grid-row: span 3;                          /* 각 카드가 row 3 다 span */
  gap: 0.5rem;
}

/* 모든 카드 heading 이 sibling 간 정렬 — 다 같은 'auto' row 트랙
   공유해서. Body 와 footer 도 마찬가지. Subgrid 없으면 각 row 를
   손으로 동일하게 sizing 해야 함. */

Exercise

grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; grid-auto-flow: row dense; gap: 1rem; 로 사진 grid 짓기. 사진 12 장 추가: 일부에 grid-column: span 2, 일부에 grid-row: span 2 마크. dense 있을 때와 없을 때 비교 — dense 버전이 hole 없어야 하고, 기본 버전이 보이는 갭 있을 수 있어. 그러고 title 이 column 간 정렬되어야 하는 카드 layout 에 subgrid 추가.

Hint

Dense 가 아무것도 안 하는 것 같으면, span-2 항목이 채울 갭 없을 만큼 작은 거. 일부 항목을 2x2 로 만들고 dense 가 더 작은 항목을 남은 공간에 pack 하는 거 봐.

암묵적 vs 명시적 Grid: 트랙이 자동으로 나타날 때

명시적 Grid

암묵적 Grid

`grid-auto-flow`: 항목이 스스로 배치되는 방법

Masonry 같은 layout 용 dense packing

`span` 과 결합

`subgrid` feature

피파의 노트

Code

External links

Exercise

Progress

댓글 0

명시적 Grid

암묵적 Grid

grid-auto-flow: 항목이 스스로 배치되는 방법

Masonry 같은 layout 용 dense packing

span 과 결합

subgrid feature

피파의 노트

Code

External links

Exercise

Progress

`grid-auto-flow`: 항목이 스스로 배치되는 방법

`span` 과 결합

`subgrid` feature