![[HTML/CSS] 7. Grid Layout](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-10T00%3A11%3A38.986Z-f0e41d77-7465-4548-ba25-df32a8dda5bd&w=3840&q=75)
1. 박스 배치의 한계
- Flexbox를 이용하여 내부 박스들을 Inline 속성으로 변화하여 정렬할 수 있음
- 화면의 비율에 따라서 설정은 가능하나, 박스 내부의 크기 비율로 정렬할 수 없음
2. Grid
- 그리드 형태로 배치하면 내부 박스들의 격자 배치를 편하게 설정할 수 있음
- 내부 요소들의 크기 비율 설정 가능
- 내부 요소들의 간격 설정 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
.g-box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px 5px;
}
.g-box div {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="g-box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
- 1fr 1fr 1fr의 방식이 아닌, 박스 내에 비율을 직접 작성하여 설정 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
div {
border: 1px solid black;
padding: 10px;
}
.f-box {
display: flex;
flex-wrap: wrap;
}
.b1 {
flex: 1;
}
.b2 {
flex: 4;
}
.b3 {
flex: 1;
}
.b4 {
flex: 2;
}
</style>
</head>
<body>
<div class="f-box">
<div class="b1">1</div>
<div class="b2">1</div>
<div class="b3">1</div>
<div class="b4">1</div>
</div>
</body>
</html>
Share article