CSS로 4열 레이아웃 그리드 구현하기
웹 페이지에서 콘텐츠를 네 개의 열로 나란히 배치하고 싶다면 float 속성과 백분율(%) 단위의 너비를 활용하는 것이 가장 기본적인 방법입니다. 각 열에 컨테이너 전체 너비의 25%를 할당하면 네 개의 열이 정확히 한 줄에 배치됩니다.
핵심 원리
- width: 25% — 컨테이너 너비의 4분의 1씩 차지하여 4개의 열이 한 줄에 정렬됩니다.
- float: left — 각 div 요소를 왼쪽으로 띄워 나란히 배치합니다.
- box-sizing: border-box — 패딩과 테두리가 너비 계산에 포함되어 레이아웃이 어긋나지 않습니다.
- clear: both — float로 인한 부모 요소의 높이 무너짐(collapse) 현상을 방지합니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
.first, .second, .third, .fourth {
float: left;
width: 25%;
color: white;
padding: 10px;
height: 500px;
text-align: center;
}
.first {
background-color: tomato;
}
.second {
background-color: teal;
}
.third {
background-color: rgb(166, 71, 255);
}
.fourth {
background-color: rgb(255, 71, 194);
}
.container:after {
clear: both;
}
</style>
</head>
<body>
<h1 style="text-align: center;">4열 그리드 예제</h1>
<div class="container">
<div class="first">
<h1>첫 번째 div 영역입니다</h1>
</div>
<div class="second">
<h1>두 번째 div 영역입니다</h1>
</div>
<div class="third">
<h1>세 번째 div 영역입니다</h1>
</div>
<div class="fourth">
<h1>네 번째 div 영역입니다</h1>
</div>
</div>
</body>
</html>코드 설명
각 열은 서로 다른 배경색(tomato, teal, 보라색, 핑크색)으로 구분했으며, 흰색 텍스트와 중앙 정렬을 적용해 시각적으로 명확하게 표현했습니다. .container:after 선택자에 clear: both를 지정하면 자식 요소들의 float가 해제되어 컨테이너가 콘텐츠 높이를 온전히 감싸게 됩니다.
실행 결과
위 코드를 실행하면 네 개의 색상 있는 열이 화면에 나란히 배치된 4열 그리드가 출력됩니다.
참고: 더 현대적인 방법
float 방식은 오래된 브라우저까지 호환할 수 있다는 장점이 있지만, 최신 프로젝트에서는 Flexbox(display: flex)나 CSS Grid(display: grid; grid-template-columns: repeat(4, 1fr))를 사용하는 것이 유지보수와 반응형 대응 면에서 훨씬 효율적입니다.