2nd/10_Wiki/Topic_Programming/Topic_CSS/CSS_Grid_Gaps.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
css-grid-gaps	CSS Grid Gaps	Frontend	draft	conceptual		grid gaps gutters column-gap row-gap gap shorthand grid spacing		B	0.90	2026-06-23	2026-06-23			css web frontend w3schools grid gap	https://www.w3schools.com/css/css_grid_gap.asp

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]

.container {
  display: grid;
  column-gap: 50px;
}

row-gap Property — specifies a 50 pixel gap between grid rows. [S1]

.container {
  display: grid;
  row-gap: 50px;
}

gap with a single value — sets the gap between rows and columns to 50px using the shorthand. [S1]

.container {
  display: grid;
  gap: 50px;
}

gap with two values — sets the gap between rows to 30px and the gap between columns to 100px. [S1]

.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):

.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).