koriweb
9609c04755
W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
117 lines
4.5 KiB
Markdown
117 lines
4.5 KiB
Markdown
---
|
|
id: css-grid-gaps
|
|
title: "CSS Grid Gaps"
|
|
category: "Frontend"
|
|
status: "draft"
|
|
verification_status: "conceptual"
|
|
canonical_id: ""
|
|
aliases: ["grid gaps", "gutters", "column-gap", "row-gap", "gap shorthand", "grid spacing"]
|
|
duplicate_of: ""
|
|
source_trust_level: "B"
|
|
confidence_score: 0.90
|
|
created_at: 2026-06-23
|
|
updated_at: 2026-06-23
|
|
review_reason: ""
|
|
merge_history: []
|
|
tags: ["css", "web", "frontend", "w3schools", "grid", "gap"]
|
|
raw_sources: ["https://www.w3schools.com/css/css_grid_gap.asp"]
|
|
applied_in: []
|
|
github_commit: ""
|
|
---
|
|
|
|
# [[CSS Grid Gaps]]
|
|
|
|
## 🎯 한 줄 통찰 (One-line insight)
|
|
The space between rows and columns in a grid container is called a gap (or gutter), controlled by `column-gap`, `row-gap`, and the `gap` shorthand — created between tracks, never on the outer edges. [S1]
|
|
|
|
## 🧠 핵심 개념 (Core concepts)
|
|
- **Gaps (gutters)** — the space between the rows and columns in a grid container are called gaps (or gutters). [S1]
|
|
- **Inner only** — the gaps are created between the grid rows and columns, not on the outer edges of the grid container. [S1]
|
|
- **Default 0** — the default size of the gap is 0, which means that there is no spacing between grid items. [S1]
|
|
- **Three properties** — `column-gap`, `row-gap`, and `gap` (a shorthand). [S1]
|
|
|
|
## 🧩 추출된 패턴 (Extracted patterns)
|
|
- **`gap` shorthand** — one value sets both row and column gaps equally; two values set row gap then column gap. [S1]
|
|
- **No outer margin** — gaps never add spacing at the container's outer edges, only between tracks. [S1]
|
|
|
|
## 📖 세부 내용 (Details)
|
|
The space between the rows and columns in a grid container are called gaps (or gutters). The gaps are created between the grid rows and columns, not on the outer edges of the grid container. The default size of the gap is 0, which means that there are no spacing between grid items. Spacing is controlled with three properties: `column-gap`, `row-gap`, and `gap` as a shorthand. [S1]
|
|
|
|
**`column-gap` Property** — specifies a 50 pixel gap between grid columns. [S1]
|
|
```css
|
|
.container {
|
|
display: grid;
|
|
column-gap: 50px;
|
|
}
|
|
```
|
|
|
|
**`row-gap` Property** — specifies a 50 pixel gap between grid rows. [S1]
|
|
```css
|
|
.container {
|
|
display: grid;
|
|
row-gap: 50px;
|
|
}
|
|
```
|
|
|
|
**`gap` with a single value** — sets the gap between rows and columns to 50px using the shorthand. [S1]
|
|
```css
|
|
.container {
|
|
display: grid;
|
|
gap: 50px;
|
|
}
|
|
```
|
|
|
|
**`gap` with two values** — sets the gap between rows to 30px and the gap between columns to 100px. [S1]
|
|
```css
|
|
.container {
|
|
display: grid;
|
|
gap: 30px 100px;
|
|
}
|
|
```
|
|
|
|
**Grid Gap Properties Table** [S1]
|
|
|
|
| Property | Description |
|
|
|----------|-------------|
|
|
| `column-gap` | Specifies the gap between the grid columns |
|
|
| `gap` | Shorthand property for `row-gap` and `column-gap` |
|
|
| `row-gap` | Specifies the gap between the grid rows |
|
|
|
|
## 🛠️ 적용 사례 (Applied in summary)
|
|
The page's own examples apply `column-gap`, `row-gap`, and the `gap` shorthand (single and two-value) to a `.container` with `display: grid`. No external project/commit applications found in the source.
|
|
|
|
## 💻 코드 패턴 (Code patterns)
|
|
Set grid gaps (language: CSS):
|
|
```css
|
|
.container {
|
|
display: grid;
|
|
gap: 30px 100px; /* row-gap column-gap */
|
|
}
|
|
```
|
|
|
|
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
|
|
- **`gap: 50px`** — equal spacing between both rows and columns. [S1]
|
|
- **`gap: 30px 100px`** — different spacing: 30px between rows, 100px between columns. [S1]
|
|
- **`column-gap` / `row-gap`** — set only the column or only the row spacing individually. [S1]
|
|
|
|
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
|
No contradictions found in the source.
|
|
|
|
## ✅ 검증 상태 및 신뢰도
|
|
- **상태:** draft
|
|
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
|
|
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
|
- **신뢰 점수:** 0.90
|
|
- **중복 검사 결과:** 신규 생성 (New discovery)
|
|
|
|
## 🔗 지식 그래프 (Knowledge Graph)
|
|
- **상위/루트:** [[CSS Tutorial]]
|
|
- **관련 개념:** [[CSS Grid Intro]], [[CSS Grid Container]], [[CSS Grid Tracks]]
|
|
- **참조 맥락:** Referenced whenever controlling the spacing (gutters) between grid rows and columns.
|
|
|
|
## 📚 출처 (Sources)
|
|
- [S1] W3Schools — CSS Grid Gaps — https://www.w3schools.com/css/css_grid_gap.asp
|
|
|
|
## 📝 변경 이력 (Change history)
|
|
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Grid Gaps" page (Astra wiki-curation, P-Reinforce v3.1 format).
|