CSS 그리드를 사용하여 뱀과 같은 그리드 채우기를 얻는 방법은 무엇입니까?

뱀 모양의 그리드 채우기를 위해 CSS 그리드 사용

CSS 그리드에서 Grid-auto-flow 속성은 그리드 항목의 레이아웃을 제어합니다. 열 기반 그리드에서 뱀과 같은 채우기 패턴을 달성하기 위해 이 속성을 활용할 수 있습니다.

3행 그리드가 있고 뱀과 같은 그리드에서 셀을 채우려는 다음 시나리오를 고려해 보세요. 방식:

<code class="css">01 06 07 12
02 05 08 11
03 04 09 10</code>

이를 달성하기 위해 그리드 자동 흐름: 열 밀도;를 설정할 수 있습니다. 그러면 다음 행으로 이동하기 전에 먼저 그리드 열이 채워집니다. 두 번째 행을 오프셋하려면 n번째 하위 선택기를 사용하여 다음과 같이 특정 항목을 2행으로 푸시할 수 있습니다.

<code class="css">.container .div:nth-child(6n + 5) { grid-row: 2; }</code>

세 번째 행 항목을 이동하려면 다음을 사용할 수 있습니다.

<code class="css">.container .div:nth-child(6n + 4) { grid-row: 3; }</code>

이러한 기술을 결합하여 기둥 기반 그리드 시스템 내에서 원하는 뱀 모양 채우기 패턴을 얻을 수 있습니다.

예제 코드

다음은 구현을 보여주는 실제 예입니다.

<code class="html"><div class="container">
  <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div></code>

<code class="css">.container {
  display: grid;
  grid-template-rows: 20px 20px 20px;
  grid-auto-columns: 20px;
  grid-auto-flow: column dense;
}

.container > div:nth-child(6n + 4) { grid-row: 3; }
.container > div:nth-child(6n + 5) { grid-row: 2; }

/* Irrelevant Styles */
.container {
  grid-gap: 5px;
  counter-reset: num;
  margin: 10px;
}

.container > div {
  border: 1px solid;
}
.container > div:before {
  content: counter(num);
  counter-increment: num;
}</code>

위 내용은 CSS 그리드를 사용하여 뱀과 같은 그리드 채우기를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!