column-count divides content into vertical columns inside its container.
로컬 CSS 다단 생성기
실시간 미리보기로 CSS 다중 열 레이아웃 구축
열 수를 선택하고, 간격과 구분선을 조정하고, 레이아웃 전체에 실제 텍스트가 흐르는 CSS를 복사하세요.
* 파일을 업로드하지 않습니다. 처리는 이 브라우저 탭에서만 진행됩니다.
준비 완료
column-count: 3; column-gap: 32px; column-rule: 2px solid #1746d1;CSS multi-column layout lets a block of text flow through several vertical columns. It is useful for editorial pages, compact reference panels, and print-like sections where the reading order should continue from one column into the next. Adjust the gap to give each column room to breathe, then add a quiet rule when the separation needs to be visible.
QUICK GUIDE
열이 읽기 흐름을 바꿉니다
column-gap controls the space between columns; it does not change the content width.
column-rule is painted inside that gap, so a divider does not add layout width.
Multi-column layout is useful for editorial copy, compact lists, and print-like sections.
FAQ
CSS columns questions
How does text flow?
The browser fills one column and continues into the next, fragmenting the content inside the element.
Why does the rule sit inside the gap?
CSS paints column rules in the gap, so changing the gap gives the divider more breathing room.
Should I use Grid instead?
Use columns when text should flow naturally. Use Grid when each item needs an explicit row and column position.