2nd/10_Wiki/Topic_CSS/CSS_Grid_Align.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-align	CSS Grid Align	Frontend	draft	conceptual		justify-content grid align-content grid place-content grid content alignment CSS Grid Container Align grid main-axis alignment		B	0.9	2026-06-23	2026-06-23			css web frontend w3schools grid alignment	https://www.w3schools.com/css/css_grid_align.asp

CSS Grid Align

🎯 한 줄 통찰 (One-line insight)

Inside a grid container, justify-content aligns grid content along the main-axis (horizontally), align-content aligns it along the cross-axis (vertically), and place-content is the shorthand for both — each working only when the content does not fill all available space. [S1]

🧠 핵심 개념 (Core concepts)

• justify-content — aligns the grid content when it does not use all available space on the main-axis (horizontally). [S1]
• align-content — aligns the grid content when it does not use all available space on the cross-axis (vertically). [S1]
• place-content — shorthand property for align-content and justify-content. [S1]
• Space precondition — justify-content only has effect when the grid content's total width is less than the container's width; align-content only has effect when the grid content's total height is less than the container's height. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Distribution values — space-evenly, space-around, and space-between distribute free space between/around grid items in different ratios. [S1]
• Positional values — center, start, and end push the grid content to a single position within the container. [S1]
• Shorthand collapse — place-content takes either two values (align-content then justify-content) or one value applied to both axes. [S1]

📖 세부 내용 (Details)

The CSS justify-content Property The justify-content property is used to align the grid content when it does not use all available space on the main-axis (horizontally). Possible values: space-evenly, space-around, space-between, center, start, end. The grid content's total width has to be less than the container's width for the justify-content property to have any effect. [S1]

space-evenly displays the grid items with equal space around them: [S1]

.container {
  display: grid;
  justify-content: space-evenly;
}

space-around displays the grid items with space around them: [S1]

.container {
  display: grid;
  justify-content: space-around;
}

space-between displays the grid items with space between them: [S1]

.container {
  display: grid;
  justify-content: space-between;
}

center positions the grid items in the center of the container: [S1]

.container {
  display: grid;
  justify-content: center;
}

start positions the grid items at the start of the container: [S1]

.container {
  display: grid;
  justify-content: start;
}

end positions the grid items at the end of the container: [S1]

.container {
  display: grid;
  justify-content: end;
}

The CSS align-content Property The align-content property is used to align the grid content when it does not use all available space on the cross-axis (vertically). Possible values: space-evenly, space-around, space-between, center, start, end. The grid content's total height has to be less than the container's height for the align-content property to have any effect. The following examples use a 300-pixel-high container to better demonstrate the property. [S1]

center positions the grid items in the middle of the container: [S1]

.container {
  display: grid;
  height: 300px;
  align-content: center;
}

With space-evenly, the grid lines are evenly distributed in the grid container, with equal space on top, bottom and between: [S1]

.container {
  display: grid;
  height: 300px;
  align-content: space-evenly;
}

With space-around, the space between the grid lines are equal, but the space before the first grid item and after the last grid item is set to half of the space between the grid lines: [S1]

.container {
  display: grid;
  height: 300px;
  align-content: space-around;
}

With space-between, the space between the grid lines are equal, but the first grid item is flush with the start edge of the container, and the last grid item is flush with the end edge of the container: [S1]

.container {
  display: grid;
  height: 300px;
  align-content: space-between;
}

start positions the grid items at the start of the container: [S1]

.container {
  display: grid;
  height: 300px;
  align-content: start;
}

end positions the grid items at the end of the container: [S1]

.container {
  display: grid;
  height: 300px;
  align-content: end;
}

The CSS place-content Property The place-content property is a shorthand property for the align-content and the justify-content properties. With two values, place-content: start center; sets align-content to start and justify-content to center. With one value, place-content: end; sets both align-content and justify-content to end. The grid item's total height and width has to be less than the container's height and width for the place-content property to have any effect. [S1]

center positions the grid items in the middle of the container (both vertically and horizontally): [S1]

.container {
  display: grid;
  height: 300px;
  place-content: center;
}

The end space-between value aligns the grid lines towards the bottom of the grid container, and aligns the grid items with the same space between them horizontally: [S1]

.container {
  display: grid;
  height: 300px;
  place-content: end space-between;
}

Property summary table [S1]

Property	Purpose
justify-content	Horizontal (main-axis) alignment of grid content within the container
align-content	Vertical (cross-axis) alignment of grid content within the container
place-content	Shorthand combining align-content and justify-content

🛠️ 적용 사례 (Applied in summary)

The page's own examples are the applied cases: container rules using each distribution and positional value, plus the 300px-high container used to demonstrate vertical alignment. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Horizontal alignment of grid content (language: CSS):

.container {
  display: grid;
  justify-content: center;
}

Vertical alignment within a sized container:

.container {
  display: grid;
  height: 300px;
  align-content: space-between;
}

Combined shorthand:

.container {
  display: grid;
  height: 300px;
  place-content: end space-between;
}

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

• Use justify-content to control horizontal (main-axis) distribution; use align-content to control vertical (cross-axis) distribution. [S1]
• Choose place-content when you want to set both axes at once, supplying two values (align then justify) or one value for both. [S1]
• Among the distribution values, space-between flushes the first/last items to the edges, space-around gives half-space at the ends, and space-evenly gives equal space everywhere including the ends. [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.9
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Grid Items, CSS Grid Item Align, CSS Grid 12-column Layout
• 참조 맥락: Container-level alignment of grid content, applied after a grid layout is defined.

📚 출처 (Sources)

• [S1] W3Schools — CSS Grid Align — https://www.w3schools.com/css/css_grid_align.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "CSS Grid Align" page (Astra wiki-curation, P-Reinforce v3.1 format).