CSS 그리드 레이아웃에서 열을 어떻게 재정렬할 수 있나요?

CSS 그리드의 열 순서 변경

CSS 그리드에서는 그리드를 사용하여 열과 행의 수를 지정하여 그리드의 레이아웃을 정의할 수 있습니다. 템플릿 열 및 그리드 템플릿 행 속성. 그러나 이러한 열의 순서를 재정렬하는 것은 어려울 수 있습니다.

해결책: 조밀한 키워드를 사용한 그리드 자동 흐름

그리드 항목을 재정렬하는 방법에는 여러 가지가 있지만, Grid-auto-flow 속성과 함께 dark 키워드를 사용하면 간단하고 효율적인 솔루션이 제공됩니다.

<code class="css">grid-auto-flow: dense;</code>

dense 키워드는 브라우저에 자동으로 빈 그리드 셀을 그리드 항목으로 채우고 항목을 이동하여 항목을 채우도록 지시합니다. 지정된 순서를 유지하면서 간격을 유지합니다.

예제에 적용

기존 그리드 클래스에 dark 키워드를 추가하면 모바일 레이아웃에서 열이 자동으로 재배열됩니다. 원하는 순서와 일치:

<code class="css">.my-grid {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: 15% 1fr 25%;
  grid-template-rows: 1fr; /* For as many rows as you need */
  grid-gap: 10px;
  border: 2px solid #222;
  box-sizing: border-box;
}</code>

결과:

---------------------------------------------
|     col 1             |      col 3        |
|                       |                   |
---------------------------------------------
|                     col 2                 |
---------------------------------------------

이 솔루션은 전처리기에 의지하지 않고 열 순서를 변경하는 편리하고 강력한 접근 방식을 제공합니다. .

위 내용은 CSS 그리드 레이아웃에서 열을 어떻게 재정렬할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!