CSS 그리드를 고정된 수의 열로 수직으로 채우려면 어떻게 해야 합니까?

그리드 컨테이너가 행이 아닌 열을 채우도록 만들기

질문:

채워지는 CSS 그리드를 어떻게 만들 수 있나요? 가로가 아닌 세로로 고정된 수의 행을 유지하면서 임의의 수의 행을 허용합니다. 열이요?

답변:

CSS 그리드 레이아웃은 기본적으로 이러한 특정 레이아웃을 처리할 수 없지만 CSS 다중 열 레이아웃은 솔루션을 제공합니다.

CSS 다중 열 레이아웃:

#container {
  column-count: 3;
}

이 코드 필요에 따라 새 열을 자동으로 생성하여 수직 흐름 요구 사항을 충족하는 세 개의 열로 컨테이너를 정의합니다.

CSS 그리드 레이아웃 제한 사항:

CSS 그리드 레이아웃에서, Grid-auto-flow와 Grid-template-columns는 역의 관계를 갖습니다.

• grid-auto-flow 사용: 행 (기본값) 및 그리드 템플릿 열이 정의되어 있으면 항목이 수평으로 흐르고 자동으로 새 행이 생성됩니다.
• 그러나 이러한 속성을 반대로 바꾸면(그리드 자동 흐름: 열 및 그리드 템플릿 행 정의) 결과는 다음과 같습니다. 잘못된 선언입니다.

따라서 CSS 그리드 레이아웃만으로는 고정된 수의 열로 수직으로 채워지는 그리드를 구현할 수 없습니다.

위 내용은 CSS 그리드를 고정된 수의 열로 수직으로 채우려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!