그리드 자동 흐름 및 그리드 행 구조를 사용하여 CSS 그리드에서 뱀과 같은 패턴을 만드는 방법은 무엇입니까?

스네이크라인 셀 채우기에 Grid-auto-flow 사용

CSS 그리드에서 Grid-auto-flow는 그리드 내의 그리드 항목. 기본적으로 그리드 자동 흐름 속성은 행으로 설정되어 그리드를 행 단위로 채웁니다.

열 기반 그리드에서 뱀과 같은 패턴을 생성하려면 그리드 자동 흐름을 수정하면 됩니다. 열 밀도에 대한 흐름 속성. 이렇게 하면 그리드가 열별로 채워지지만 촘촘하게 채워지므로 항목이 사용 가능한 공간을 최대한 꽉 채웁니다.

원하는 뱀과 같은 패턴을 생성하려면 사용자 정의 그리드 행 구조를 지정하여 결정해야 합니다. 각 행에 어떤 셀을 배치해야 하는지. 이는 Grid-row 속성을 사용하여 달성할 수 있습니다.

다음 코드 조각을 고려하세요.

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

여기에서는 3개의 행이 있는 그리드를 설정하고 Grid-auto-flow를 사용합니다. 열 밀도를 사용하여 그리드를 열로 채웁니다. 그런 다음 n번째 하위 선택기를 사용하여 모든 6번째 하위 요소(4번째, 10번째, 16번째 등)가 세 번째 행에 배치되고 모든 5번째 하위 요소(5번째, 11번째, 17번째 등)가 배치되어야 함을 지정합니다. 두 번째 줄에 배치되었습니다. 그러면 원하는 대로 교대로 뱀 모양의 패턴이 생성됩니다.

<code class="html"><div class="container">
  <!-- Each div represents one cell -->
  <div></div><div></div><div></div>
  <div></div><div></div><div></div>
</div></code>

이 코드 조각은 다음과 같은 출력을 생성합니다.

01 06 07
02 05 08
03 04 09

grid-auto-flow를 조작하고 사용자 정의 행 구조를 정의하여 , CSS 그리드를 사용하여 뱀줄 셀 채우기와 같은 시각적으로 매력적인 패턴을 만들 수 있습니다.

위 내용은 그리드 자동 흐름 및 그리드 행 구조를 사용하여 CSS 그리드에서 뱀과 같은 패턴을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!