CSS에서 수직으로 정렬된 그리드를 어떻게 만들 수 있나요?

CSS 그리드 레이아웃을 사용하여 수직 정렬 그리드 만들기

CSS 그리드 레이아웃으로 작업할 때 다음과 같은 상황이 발생할 수 있습니다. 기본 수평 흐름 대신 수직으로 흐르는 그리드를 만들고 싶습니다. CSS Flexbox는 흐름 방향을 재정의하기 위한 flex-direction 속성을 제공하지만 현재 CSS 그리드 레이아웃에는 원하는 흐름을 명시적으로 지정하는 유사한 속성이 없습니다.

CSS 그리드 레이아웃에서는 Grid-auto-flow 속성이 담당합니다. 그리드의 항목 배치 방향을 결정합니다. 행(기본값)으로 설정하면 항목이 수평으로 흐르며 필요에 따라 새 행이 생성됩니다. 반대로, Grid-auto-flow를 열로 설정하면 항목이 수직으로 흐르게 되어 필요에 따라 새 열이 생성됩니다.

그러나 이러한 원하는 동작은 CSS 그리드 레이아웃만으로는 달성할 수 없습니다. 행을 정의하지 않고 지정된 수의 열을 수직으로 채우는 그리드를 생성하려면 CSS 다중 열 레이아웃을 고려해 보는 것이 적합한 대안입니다. CSS 그리드 레이아웃과 달리 CSS 다중 열 레이아웃을 사용하면 자동 열 흐름으로 다중 열 레이아웃을 생성하여 새 열이 필요할 때까지 그리드 항목이 수직으로 채워지도록 할 수 있습니다.

CSS 다중 열 레이아웃 예:

#container {
  columns: 3;  /* Specify the number of columns */
}

#container div {
  margin-left: 5px;  /* Add some margin for clarity */
}

<div>

CSS 다중 열 레이아웃을 활용하면 원하는 결과를 얻을 수 있습니다. 행을 정의하지 않고 지정된 수의 열을 사용하여 수직으로 정렬된 그리드 레이아웃을 사용하여 이 특정 시나리오에서 CSS 그리드 레이아웃의 한계를 극복했습니다.

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