CSS GridQuery가 열 기반 그리드에서 뱀과 같은 셀 패턴을 만들 수 있나요?

CSS 그리드를 사용한 뱀선 그리드

질의: 열 중심 CSS 그리드 내에서 뱀 모양의 셀 패턴을 생성하는 것이 가능합니까? , 아래 예와 유사합니까?

    01 06 07 12
    02 05 08 11
    03 04 09 10

해결책:

그리드에 항상 세 개의 행이 있다고 가정하면 다음과 같은 영리한 해결책이 있습니다.

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

/* Cosmetic 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>

키 이 솔루션에는 부모 내의 위치에 따라 자식 요소를 선택하는 nth-child() 선택기가 있습니다. 그리드 자동 흐름: 열 밀도는 요소를 조밀한 열 형태로 유지하는 것입니다.

이 기술은 뱀과 같은 채우기 패턴의 유연성을 원하지만 모든 항목을 정의할 필요가 없을 때 특히 유용합니다. 단일 셀의 위치를 ​​수동으로 지정합니다.

위 내용은 CSS GridQuery가 열 기반 그리드에서 뱀과 같은 셀 패턴을 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!