CSS 그리드 컨테이너가 행 대신 열을 채우도록 만드는 방법은 무엇입니까?

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

CSS 그리드 레이아웃에서 Grid-auto-flow 속성은 항목이 행 또는 열로 배치되는지 여부를 결정합니다. 기본 설정인 행으로 설정하면 항목이 가로로 배치되어 필요에 따라 새 행이 생성됩니다. 원하는 레이아웃이 수직인 경우 일반적으로 이 동작은 이상적이지 않습니다.

grid-auto-flow가 행으로 설정된 경우,grid-template-columns는 그리드의 열 수를 정의합니다. 그러나 이 시나리오에서는 항목이 여전히 가로로 흐르며 열이 아닌 행을 채웁니다.

행을 정의하지 않고 필요에 따라 새 열을 생성하는 세로로 흐르는 그리드의 경우 CSS 다중 열 사용을 고려하세요. 대신 레이아웃. 항목을 수직으로 쌓아 필요에 따라 자동으로 새 열을 생성할 수 있습니다.

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
}

이 코드 조각은 개념을 보여줍니다. 항목은 그리드-템플릿-열 속성에 세 개의 열이 정의되어 있음에도 불구하고 필요에 따라 새 행을 생성하면서 수평으로 흐릅니다. 이 특정 레이아웃에는 CSS 그리드 레이아웃을 사용하지 않는 것이 좋습니다.

위 내용은 CSS 그리드 컨테이너가 행 대신 열을 채우도록 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!