CSS에서 수직으로 흐르는 그리드 레이아웃을 어떻게 만들 수 있나요?

세로로 흐르는 그리드 컨테이너

CSS 그리드 레이아웃에서는 그리드 컨테이너가 가로가 아닌 세로로 흐르도록 정의하는 것이 직접적으로 불가능합니다. CSS Flexbox는 flex-direction 속성을 제공하므로 열 수나 행 수를 지정해야 하는지에 대한 의문이 생깁니다.

CSS 그리드 레이아웃 제한

CSS의 문제 그리드 레이아웃은 그리드-자동 흐름과 그리드-템플릿-행/열 속성 간의 역관계입니다. Grid-auto-flow: row가 Grid-template-columns와 함께 설정되면 그리드 항목이 자동으로 가로 방향으로 흐르는 행을 생성합니다.

다중 열 레이아웃 대안

정말 수직으로 흐르는 그리드의 경우 CSS 다중 열 레이아웃을 고려해야 합니다. 이 모듈을 사용하면 행을 정의하지 않고 필요에 따라 새 열을 생성할 수 있습니다.

#container {
  column-count: 3;
}

예:

<div>

이 코드는 수직으로 흐르는 그리드를 생성합니다. 세 개의 열로 구성됩니다.

위 내용은 CSS에서 수직으로 흐르는 그리드 레이아웃을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!