grid
grid.zip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그리드 열(가로) 설정</title>
<style>
.item {
padding: 3rem;
border: 1px solid #ccc;
background-color: #f4f4f4;
font-size: 1.3rem;
text-align: center;
}
.grid {
/* 그리드 사용 시작 */
display: grid;
/* 그리드 템플릿 컬럼 (가로 아이템의 길이) 설정 */
/* grid-template-columns: 200px 200px 200px; */
/* 화면 크기가 달라져도 25% 유지됨 */
/* grid-template-columns: 25% 25% 25% 25%; */
/* grid-template-columns: 200px auto 200px; */
/* fr : 비율 -> 1 : 1 : 1 */
grid-template-columns: 1fr 1fr;
/* 그리드 gap : 아이템 사이의 공간 */
gap: 15px;
/* 그리드 템플릿 로우 (세로 줄의 길이) 설정 */
grid-template-rows: 1fr 2fr 3fr;
}
main {
display: grid;
grid-template-columns: 3fr 1fr;
margin-top: 50px;
gap: 20px;
}
</style>
</head>
<body>
<div class="grid">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
<main>
<section>
<h3>환영합니다</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, possimus, culpa quos non dolor cupiditate, exercitationem placeat maxime error quidem vero expedita hic praesentium? Nulla ea reiciendis optio nostrum ex?</p>
</section>
<aside>
<h3>광고글</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi placeat aut porro nihil</p>
</aside>
</main>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그리드 병합</title>
<style>
.item {
padding: 3rem;
border: 1px solid #ccc;
background-color: #f4f4f4;
font-size: 1.3rem;
text-align: center;
}
.grid {
/* 그리드 사용 시작 */
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.item:first-child {
grid-column: 1/4;
grid-row: 1/3;
}
.item:nth-child(9) {
grid-column: 2/5;
grid-row: 4/6;
}
</style>
</head>
<body>
<div class="grid">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</body>
</html>
