CSS 그리드 열 재정렬

소개

CSS 그리드는 웹 콘텐츠의 순서와 위치 지정을 제어하는 ​​기능을 포함하여 웹 콘텐츠를 위한 유연한 레이아웃 시스템을 제공합니다. 열. 이 질문은 CSS 그리드 내에서 열 순서를 변경하는 방법에 대해 자세히 설명합니다.

Grid-template-areas 속성

그리드 열을 재배열하는 한 가지 방법은 Grid-template-areas 속성을 사용하는 것입니다. 이를 통해 그리드 내의 특정 영역을 정의하고 해당 영역에 열을 할당할 수 있습니다. 예를 들면:

.my-grid {
  grid-template-areas:
    "col3 col1"
    "col3 col2";
}

이렇게 하면 col3 요소가 행의 시작 부분으로 이동되고 그 뒤에 col1 요소가 이동합니다.

줄 기반 배치

줄 기반 배치를 사용할 수도 있습니다. 열 순서를 제어합니다. 여기에는 시작 및 끝 위치를 결정하는 "grid-column-start" 및 "grid-column-end" 속성을 사용하여 그리드 선을 따라 그리드 항목을 차례로 배치하는 작업이 포함됩니다.

예를 들어, col1 요소 다음의 col3 요소:

.col3 {
  grid-column-start: 2;
}

순서 속성

순서 속성은 트랙 내 그리드 항목의 순서를 설정합니다. 0보다 작은 값은 트랙 시작 앞에 항목을 배치하고, 0보다 큰 값은 트랙 끝 뒤에 항목을 배치합니다.

col3 요소를 첫 번째 위치로 이동하려면:

.col3 {
  order: -1;
}

Dense 함수

grid-auto-flow 속성의 Dense 함수는 그리드 열을 재배열하는 데에도 사용할 수 있습니다. 빈 그리드 셀을 건너뛰고 그리드 컨테이너의 시작 부분부터 시작하여 사용 가능한 공간에 항목을 정렬합니다.

col3 요소를 두 번째 행의 시작 부분으로 이동하려면:

.my-grid {
  grid-auto-flow: dense 1fr;
}
.col3 {
  grid-column: 3;
  grid-row: 2;
}

이러한 기술을 구현하면 그리드 열을 동적으로 재배열하여 다양한 화면 크기나 기기 방향에서 원하는 레이아웃 요구 사항을 충족할 수 있습니다.