2nd/10_Wiki/Topic_CSS/CSS_Grid_Item_Order.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-order	CSS Grid Item Order	Frontend	draft	conceptual		order property grid visual order CSS Grid Items Order reorder grid items grid source order DOM order vs visual order		B	0.88	2026-06-23	2026-06-23			css web frontend w3schools grid accessibility	https://www.w3schools.com/css/css_grid_item_order.asp

CSS Grid Item Order

🎯 한 줄 통찰 (One-line insight)

The CSS order property sets the visual order of grid items independently of their HTML source order — but it changes only the visual presentation, not the DOM order, which affects screen-reader users. [S1]

🧠 핵심 개념 (Core concepts)

• order property — can be used to define the visual order of the grid items. [S1]
• Source order is not display order — the first grid item in the HTML source code does not have to appear as the first item in the grid container. [S1]
• Visual only — the order property provides visual reordering, but it does not change the logical order of elements in the DOM. [S1]
• Accessibility impact — this affects users navigating with assistive technologies like screen readers, as the content will be read in a different order than it is visually presented. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Numeric reordering — assign each item a numeric order value; items render in ascending order regardless of HTML position. [S1]
• Decoupled layout — visual sequencing is decoupled from document structure, with a known accessibility trade-off. [S1]

📖 세부 내용 (Details)

Set the Visual Order of the Grid Items The CSS order property can be used to define the visual order of the grid items. The first grid item in the HTML source code does not have to appear as the first item in the grid container. [S1]

.item1 {order: 3;}
.item2 {order: 6;}
.item3 {order: 1;}
.item4 {order: 2;}
.item5 {order: 4;}
.item6 {order: 5;}

This example reorders six grid items to appear in a different sequence than their HTML source order. [S1]

Accessibility note The order property provides visual reordering, but it does not change the logical order of elements in the DOM. This will affect users navigating the site with assistive technologies like screen readers, as the content will be read in a different order than it is visually presented. [S1]

🛠️ 적용 사례 (Applied in summary)

The page's applied case is reordering six items so that the visual sequence (item3, item4, item1, item5, item6, item2) differs from their HTML source order. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Reorder grid items visually (language: CSS):

.item1 {order: 3;}
.item2 {order: 6;}
.item3 {order: 1;}
.item4 {order: 2;}
.item5 {order: 4;}
.item6 {order: 5;}

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.88
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Grid Items, CSS Grid Item Align, CSS Grid Item Named
• 참조 맥락: Controlling presentation order of grid items while being mindful of DOM/accessibility order.

📚 출처 (Sources)

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

📝 변경 이력 (Change history)

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