CSS / Tutorial / Grid / order
order는 Grid 아이템을 처리하는 배치 순서에 영향을 주며, 자동 배치에서는 작은 정숫값부터 빈 셀에 놓이게 합니다. 값이 같으면 HTML 순서를 따릅니다. 다만 행·열 위치를 직접 지정한 아이템을 다른 셀로 옮기는 좌표 속성은 아니며, 기본 키보드 탐색이나 문서 구조를 함께 바꾸지도 않습니다.
기본값과 자동 배치에서의 순서
order의 초기값은 0이고 음수도 사용할 수 있습니다. 부모 컨테이너가 아니라 순서를 바꿀 Grid 아이템에 지정합니다. 예를 들어 다른 아이템이 모두 0인 상태에서 특정 아이템에 1을 주면 맨 앞으로 오는 것이 아니라 기본값 아이템들 뒤에 처리됩니다.
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.featured {
order: -1;
}이 설명의 화면 순서는 기본 가로 쓰기·왼쪽에서 오른쪽·행 방향 자동 배치를 기준으로 합니다. grid-auto-flow, 아이템의 셀 점유 범위, 명시적 위치와 빈 공간 채우기 조건에 따라 최종 위치도 달라집니다. order 값만 정렬해 읽으면 어떤 Grid에서도 모든 아이템이 단순한 한 줄 순서처럼 보인다고 일반화하면 안 됩니다.
전체 예제: 자동 배치와 직접 지정한 위치 비교
아래 코드를 grid-order.html로 저장하고 브라우저에서 엽니다. 외부 파일이나 JavaScript는 필요하지 않습니다. 두 격자 모두 HTML에는 가·나·다·라 순서로 적었고, order는 각각 2·4·1·3입니다. 두 번째 격자만 각 아이템의 행·열을 직접 지정했습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid order와 명시적 위치 비교</title>
<style>
body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
h1 { font-size: 24px; } h2 { margin: 16px 0 6px; font-size: 18px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px; max-width: 420px; padding: 12px; border: 1px solid #7795a3; background: #edf5f7; }
.item { min-width: 0; min-height: 48px; border: 0; padding: 8px;
background: #176f80; color: white; font: inherit; }
.item:focus-visible { outline: 3px solid #b75c00; outline-offset: 2px; }
.a { order: 2; } .b { order: 4; } .c { order: 1; } .d { order: 3; }
.fixed .a { grid-row: 1; grid-column: 1; }
.fixed .b { grid-row: 1; grid-column: 2; }
.fixed .c { grid-row: 2; grid-column: 1; }
.fixed .d { grid-row: 2; grid-column: 2; }
</style>
</head>
<body>
<h1>Grid order 비교</h1>
<h2>자동 배치</h2>
<div class="grid automatic" role="group" aria-label="자동 배치"><button class="item a" type="button">가</button><button class="item b" type="button">나</button><button class="item c" type="button">다</button><button class="item d" type="button">라</button></div>
<h2>행·열 위치를 직접 지정</h2>
<div class="grid fixed" role="group" aria-label="위치 직접 지정"><button class="item a" type="button">가</button><button class="item b" type="button">나</button><button class="item c" type="button">다</button><button class="item d" type="button">라</button></div>
<p>두 격자의 order는 같습니다. Tab으로 이동하면 각각 HTML 순서인 가·나·다·라를 따릅니다. 버튼은 비교용입니다.</p>
</body>
</html>첫 격자는 위 행에 다·가, 아래 행에 라·나가 놓입니다. 작은 order부터 자동 배치하기 때문입니다. 둘째 격자는 가·나, 다·라의 위치가 유지됩니다. order가 같아도 각 아이템에 지정한 행·열 좌표가 있으므로 첫 격자처럼 셀을 다시 배정하지 않습니다.
직접 지정한 위치를 자동 배치로 되돌리는 실습은 style 끝에 아래 규칙을 추가하면 됩니다. grid-area: auto가 해당 아이템의 행·열 위치 지정을 초기화하므로 둘째 격자도 다·가, 라·나의 자동 배치가 됩니다. 비교를 마치면 아래 규칙을 제거해 처음 상태로 복원하세요.
.fixed .item {
grid-area: auto;
}여러 아이템을 같은 영역에 겹쳐 놓은 경우에는 order가 그리기 순서에도 영향을 줄 수 있습니다. 겹침의 앞뒤를 명확히 제어하려면 위치와 함께 z-index 등의 쌓임 조건을 따로 검토하세요. order를 셀 번호나 무조건 맨 앞으로 보이게 하는 쌓임 속성으로 해석하지 않는 것이 중요합니다.
음수와 같은 값의 정렬 실습
원래 예제의 .a·.b·.c·.d order 선언 네 개를 아래처럼 바꾸면 자동 배치 격자는 라·가, 나·다가 됩니다. 라만 -1이고 나머지가 0이기 때문입니다. 행·열이 고정된 두 번째 격자는 위치가 그대로 유지됩니다.
.a, .b, .c { order: 0; }
.d { order: -1; }다음으로 처음의 2·4·1·3을 복원하고 나의 order만 4에서 2로 바꿉니다. 다가 먼저 처리되고, 같은 값 2인 가·나는 HTML 순서대로 이어지므로 자동 배치는 다·가, 나·라가 됩니다. 모두 0으로 바꾸면 자동 배치도 HTML 순서로 돌아옵니다. 이처럼 한 번에 하나의 조건만 바꾸면 기본값과 같은 값의 정렬을 구분하기 쉽습니다.
일부 아이템만 order를 바꿨는데 예상과 다르면 나머지 아이템의 계산된 값까지 확인하세요. 음수·0·양수를 함께 비교해야 합니다. 정숫값을 받는 속성이므로 1.5나 20px 같은 값은 원하는 순서로 적용되지 않습니다. 값의 정의는 MDN order 문서를 참고할 수 있습니다.
키보드 순서와 적용되지 않는 경우
전체 예제에서 Tab을 누르면 두 격자 모두 가·나·다·라 순서로 포커스가 이동합니다. 자동 배치 격자에서는 화면의 오른쪽 위→오른쪽 아래→왼쪽 위→왼쪽 아래로 이동하므로 읽는 순서와 조작 순서가 어긋날 수 있습니다. 주황색 외곽선이 현재 위치를 보여 줍니다. 별도의 tabindex나 탐색 흐름 변경을 적용하지 않은 기본 예제의 결과입니다.
순서가 중요한 단계·폼·본문은 HTML을 논리적인 순서로 작성하세요. 시각적 배치만 고치려고 order를 사용하면 기본 탐색이나 화면 낭독기 읽기에 같은 변화가 반영되는 것으로 기대할 수 없습니다. CSS Grid 명세의 재배치 규칙도 논리적 순서를 바꾸는 대안으로 사용하지 않도록 설명합니다.
값을 바꿔도 셀이 움직이지 않으면 직접 지정된 grid-row·grid-column·grid-area가 있는지 먼저 확인합니다. 그다음 대상이 컨테이너의 직접 자식인지, 부모 display가 grid인지, 다른 CSS가 order를 덮는지 확인하세요. 자동 배치의 결과를 판단할 때는 Grid 자동 배치 규칙과 함께 아이템의 점유 영역을 보는 것이 정확합니다.
