순서 정렬

사용법

order 속성을 사용하여 그리드 아이템을 순서에 따라 정렬 할 수 있습니다.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(50px, auto));
}

.item:nth-child(1) {
  /* 그리드 아이템 순서 설정 (자동 배치 내) */
  order: 2;
}
.item:nth-child(2) {
  order: 3;
}
.item:nth-child(3) {
  order: 1;
}

실습

레퍼런스

CSS Grid Layout Module Level 1

w3.org/TR/css-grid-1/#order-property