docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)
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>
This commit is contained in:
@@ -0,0 +1,217 @@
|
||||
---
|
||||
id: css-grid-align
|
||||
title: "CSS Grid Align"
|
||||
category: "Frontend"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["justify-content grid", "align-content grid", "place-content", "grid content alignment", "CSS Grid Container Align", "grid main-axis alignment"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.9
|
||||
created_at: 2026-06-23
|
||||
updated_at: 2026-06-23
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["css", "web", "frontend", "w3schools", "grid", "alignment"]
|
||||
raw_sources: ["https://www.w3schools.com/css/css_grid_align.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[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]
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
```
|
||||
`space-around` displays the grid items with space around them: [S1]
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
justify-content: space-around;
|
||||
}
|
||||
```
|
||||
`space-between` displays the grid items with space between them: [S1]
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
justify-content: space-between;
|
||||
}
|
||||
```
|
||||
`center` positions the grid items in the center of the container: [S1]
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
}
|
||||
```
|
||||
`start` positions the grid items at the start of the container: [S1]
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
justify-content: start;
|
||||
}
|
||||
```
|
||||
`end` positions the grid items at the end of the container: [S1]
|
||||
```css
|
||||
.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]
|
||||
```css
|
||||
.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]
|
||||
```css
|
||||
.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]
|
||||
```css
|
||||
.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]
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
height: 300px;
|
||||
align-content: space-between;
|
||||
}
|
||||
```
|
||||
`start` positions the grid items at the start of the container: [S1]
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
height: 300px;
|
||||
align-content: start;
|
||||
}
|
||||
```
|
||||
`end` positions the grid items at the end of the container: [S1]
|
||||
```css
|
||||
.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]
|
||||
```css
|
||||
.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]
|
||||
```css
|
||||
.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):
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
}
|
||||
```
|
||||
Vertical alignment within a sized container:
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
height: 300px;
|
||||
align-content: space-between;
|
||||
}
|
||||
```
|
||||
Combined shorthand:
|
||||
```css
|
||||
.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).
|
||||
Reference in New Issue
Block a user