최신 CSS를 사용한 클러스터 레이아웃 | Chris Ferdinandi

분야 HTML & CSS
1

CSS 클러스터 레이아웃 구현하기

클러스터 레이아웃은 다양한 너비를 가진 요소들을 효과적으로 배치하는 CSS 패턴입니다. 이 패턴의 핵심은 각 요소가 자연스러운 너비를 유지하면서 균등한 간격으로 배치되고, 공간이 부족할 때 자동으로 다음 줄로 넘어가는 것입니다.

구현 방법:

  1. 자식 요소의 여백 제거

    .cluster > * {
    margin: 0;
}

    직접 자식 요소의 margin을 제거하여 간격을 직접 제어합니다.

  2. Flexbox 활용

    .cluster {
    --gap: 1em;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}
    • display: flex와 flex-wrap: wrap으로 자동 줄바꿈 구현
    • gap 속성으로 요소 간 간격 설정
    • --gap CSS 변수를 사용해 유틸리티 클래스로 간격 조정 가능

이 패턴은 태그, 버튼 그룹, 네비게이션 메뉴 등 다양한 UI 요소에 활용할 수 있으며, 반응형 디자인에 특히 유용합니다. 요소의 개수나 크기가 동적으로 변해도 자연스럽게 레이아웃이 조정되는 장점이 있습니다.

1개의 좋아요