order
order 속성으로 그리드 아이템의 순서를 정할 수 있습니다. order 속성의 기본값은 0입니다. Grid로 아이템을 배치하면 입력된 순서대로 출력됩니다.
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.item {
padding: 20px;
border: 1px solid #444444;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
순서 정하기
만약 내용을 변경하지 않고, 출력 순서만 바꾸고 싶다면 order 속성을 사용합니다. 기본값은 0이고, 작은 값이 있는 요소부터 출력합니다. 값이 같다면 입력한 순서대로 출력합니다.
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
.item {
padding: 20px;
border: 1px solid #444444;
}
.item:nth-child(1) {
order: 2;
}
.item:nth-child(2) {
order: 4;
}
.item:nth-child(3) {
order: 1;
}
.item:nth-child(4) {
order: 3;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
음수를 사용할 수도 있습니다. 뒤에 있는 아이템을 앞으로 가져올 때 유용합니다.
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
.item:nth-child(4) {
order: -1;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.