Grid-Auto-Flow를 사용하여 CSS 그리드에서 뱀선 채우기 패턴을 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

Grid-Auto-Flow를 사용하여 CSS 그리드에서 뱀선 채우기 패턴을 만드는 방법은 무엇입니까?

Mary-Kate Olsen

풀어 주다： 2024-10-23 18:49:31

원래의

1008명이 탐색했습니다.

How to Create a Snake-Line Filling Pattern in CSS Grid with Grid-Auto-Flow?

Snake Lines의 Grid-Auto-Flow

CSS 그리드에서는 Grid-auto-flow 속성을 사용하여 뱀과 같은 채우기 패턴을 생성할 수 있습니다. 이 속성은 그리드의 남은 공간을 채우는 방법을 결정합니다. 뱀과 같은 패턴을 얻는 한 가지 방법은 Grid-auto-flow 속성에 열 밀도 값을 사용하는 것입니다. 이렇게 하면 사용 가능한 셀이 열 단위로 채워지고 다음 행으로 이동합니다.

스네이크 라인 패턴을 만들려면 항상 3개의 셀이 있다는 사실을 활용할 수 있습니다. 그리드의 행. :nth-child 선택기를 사용하면 네 번째, 다섯 번째, 여섯 번째 요소가 각각 세 번째, 두 번째, 첫 번째 행에 배치되도록 지정할 수 있습니다. 그러면 뱀과 같은 채우기 패턴이 생성됩니다.

<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는 다음과 같은 결과를 생성합니다.

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

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

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

로그인 후 복사

위 내용은 Grid-Auto-Flow를 사용하여 CSS 그리드에서 뱀선 채우기 패턴을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!