2nd/10_Wiki/Topic_CSS/CSS_Grid_Item_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-item-align	CSS Grid Item Align	Frontend	draft	conceptual		justify-self align-self place-self grid cell alignment CSS Grid Items Alignment grid item inline block alignment		B	0.86	2026-06-23	2026-06-23			css web frontend w3schools grid alignment	https://www.w3schools.com/css/css_grid_item_align.asp

CSS Grid Item Align

🎯 한 줄 통찰 (One-line insight)

A single grid item can be aligned within its own grid cell using justify-self (inline / horizontal direction) and align-self (block / vertical direction), with place-self as their shorthand — each requiring available space inside the cell to have any effect. [S1]

🧠 핵심 개념 (Core concepts)

• justify-self — used to align a grid item within its grid cell in the inline direction. [S1]
• align-self — used to align a grid item within its grid cell in the block direction. [S1]
• place-self — shorthand property for align-self and justify-self. [S1]
• Direction note (Tip) — for pages in English, inline direction is left to right and block direction is top to bottom. [S1]
• Container-level equivalents — justify-items and align-items can apply the same alignment to all grid items in a container. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Per-item override — justify-self/align-self target a specific item (e.g. .item1) to override the container's default alignment. [S1]
• Space precondition — for these properties to have an alignment effect, the grid item needs available space around itself in the relevant direction. [S1]

📖 세부 내용 (Details)

Grid items can be aligned within their respective grid cells using justify-self (horizontal alignment within a cell), align-self (vertical alignment within a cell), and place-self (shorthand for align-self and justify-self). These can also be applied to all grid items in a container using justify-items and align-items on the grid container. [S1]

The CSS justify-self Property The justify-self property is used to align a grid item within its grid cell in the inline direction. Tip: for pages in English, inline direction is left to right and block direction is top to bottom. Possible values: auto (default), normal, stretch, start, left, center, end, right. For this property to have any alignment effect, the grid item needs available space around itself in the inline direction. [S1]

Using the justify-self property: [S1]

.item1 {justify-self: right;}
.item6 {justify-self: center;}

The CSS align-self Property The align-self property is used to align a grid item within its grid cell in the block direction. Possible values: auto (default), normal, stretch, start, end, center. For this property to have any alignment effect, the grid item needs available space around itself in the block direction. [S1]

Using the align-self property: [S1]

.item1 {align-self: start;}
.item6 {align-self: center;}

The CSS place-self Property place-self is listed as a shorthand property for align-self and justify-self. A dedicated Example box with inline source code for place-self was: Not found in source. [S1]

Properties reference table [S1]

Property	Description
align-self	Align a grid item within its grid cell in the block direction
justify-self	Align a grid item within its grid cell in the inline direction
place-self	A shorthand property for align-self and justify-self

🛠️ 적용 사례 (Applied in summary)

The page's applied cases are per-item alignment overrides: pushing .item1 to the right and centering .item6 with justify-self, and starting .item1 while centering .item6 with align-self. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Horizontal (inline) alignment of specific items (language: CSS):

.item1 {justify-self: right;}
.item6 {justify-self: center;}

Vertical (block) alignment of specific items:

.item1 {align-self: start;}
.item6 {align-self: center;}

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

• Use justify-self for horizontal (inline-direction) alignment inside a cell; use align-self for vertical (block-direction) alignment. [S1]
• Use place-self when you want to set both in one declaration. [S1]
• Use justify-items/align-items on the container to set a default for every item, and justify-self/align-self on an item to override that default. [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.86 (place-self 예제 코드가 출처에 없음 — Not found in source)
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Grid Items, CSS Grid Align, CSS Grid Item Named, CSS Grid Item Order
• 참조 맥락: Aligning one specific item inside its cell, as opposed to aligning the whole grid content.

📚 출처 (Sources)

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

📝 변경 이력 (Change history)

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