CSS(및 JavaScript 대안)를 사용하여 벽돌 스타일 레이아웃을 어떻게 만들 수 있습니까?

CSS를 사용하여 벽돌 스타일 레이아웃 만들기

많은 웹 디자이너는 콘텐츠 블록이 열로 배열되고 각 블록이 조정되는 레이아웃을 만들려고 노력합니다. 일관되고 미학적으로 만족스러운 외관을 유지하면서 자체 높이에 도달합니다. 이를 벽돌 스타일 레이아웃이라고 합니다.

과거에는 CSS만으로는 이 효과를 효과적으로 얻을 수 없었습니다. 그러나 CSS3의 출현으로 이제 간단한 솔루션이 생겼습니다.

CSS3 솔루션

CSS3은 다중 열 레이아웃 개념을 도입하여 개발자가 열 수와 열 사이의 간격입니다. column-count 및 columns-gap 속성을 설정하면 석조 스타일의 레이아웃을 만들 수 있습니다.

예를 들어 다음 CSS 코드는 두 개의 열과 그 사이에 10픽셀의 간격이 있는 컨테이너를 정의합니다.

.container {
    column-count: 2;
    column-gap: 10px;
    width: 360px;
}

컨테이너 내부의 각 항목은 열 내에서 사용 가능한 너비의 100%를 차지해야 합니다. 즉, 서로 다른 높이의 블록이 수직으로 쌓여 원하는 석조 스타일의 모양을 만들어냅니다.

비 CSS3 솔루션

프로젝트가 CSS3를 지원하지 않는 경우 벽돌 스타일 레이아웃을 얻으려면 JavaScript를 사용해야 합니다. 이러한 레이아웃을 만드는 데 사용할 수 있는 Masonry 및 Isotope와 같은 여러 JavaScript 라이브러리가 있습니다.

위 내용은 CSS(및 JavaScript 대안)를 사용하여 벽돌 스타일 레이아웃을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!