💡 그리드·Flexbox·메이슨리로 박스 배치하기

박스를 가로로 나열할 때 예전에는 float을 많이 썼습니다. 지금은 한 방향 정렬은 Flexbox, 행·열 격자는 CSS Grid, 높이 다른 카드를 빈틈 없이 붙일 때는 메이슨리(column-count)를 쓰는 편이 단순합니다. 이 도구에서 방식을 고르고 미리 본 뒤 부모·자식 CSS를 복사하면 됩니다.

Grid를 고르면 데스크톱에서는 슬라이더로 정한 열 개수를 쓰고, 768px 이하에서는 auto-fit·auto-fill로 바꿉니다. 메이슨리는 왼쪽 열부터 세로로 채운 뒤 옆 열로 넘어가며, 카드가 열 중간에 잘리지 않도록 break-inside: avoid를 넣습니다.

📊 언제 어떤 방식을

메뉴·버튼 한 줄이면 Flexbox, 상품 카드처럼 행·열이 맞아야 하면 Grid, 포트폴리오·갤러리처럼 카드 높이가 제각각이면 메이슨리가 맞습니다. 셋 다 간격은 gap 또는 column-gap으로 잡습니다.

* 모바일에서는 표를 좌우로 밀어 확인하세요.

📌 auto-fit·auto-fill과 메이슨리 순서

Grid의 auto-fit은 카드가 적을 때 남는 폭을 나눠 넓히고, auto-fill은 최소 너비를 지키며 빈 칸을 남기는 쪽에 가깝습니다. 이 생성기에서는 그 선택이 768px 이하에만 들어갑니다.

메이슨리(column-count)는 HTML 순서대로 왼쪽 열을 위에서 아래로 채웁니다. 최신 글이 항상 맨 위 가로 한 줄에 와야 하면 순서가 어색할 수 있으니 미리보기에서 흐름을 확인하세요.

⚙️ gap과 미리보기

gap은 아이템 사이에만 간격을 넣습니다. Flex에서 align-content는 여러 줄일 때 줄 묶음 정렬이고, 한 줄이면 거의 안 보입니다. 메이슨리 미리보기는 데모용으로 박스 높이를 다르게 두었습니다.