Grid 순서 정하는 방법 - order

order 속성으로 그리드 아이템의 순서를 변경할 수 있습니다. 시각적인 순서만 바뀔 뿐 문서 구조가 바뀌는 것은 아닙니다. order 속성의 기본값은 0입니다. 값이 같은 경우 입력된 순서대로 나옵니다. order 속성의 값을 정하면 작은 값부터 큰 값 순으로 보여집

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;
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

 

기타 CSS 참조

Post a Comment