CSS 그리드 레이아웃은 플렉스 박스가 조금 더 발전한 형태로 플렉스 박스가 1차원적으로 블록을 구성할 수 있었다면 CSS 그리드 레이아웃은 2차원적으로 블록을 구성하여 더 다양한 결과를 만들어 낼 수 있다. 웹 사이트의 형태는 아래와 같다.
예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS Grid Layout</title>
<style>
.wrapper{
width:700px;
display:grid;
grid-template-columns:repeat(3, 1fr);
grid-auto-rows:minmax(100px, auto);
}
.box{
padding:15px;
color:#fff;
font-weight:bold;
text-align:center;
}
.box1 {
background-color:#3689ff;
grid-column:1/4;
}
.box2 {
background-color:#00cf12;
grid-row:2/4;
}
.box3 {
background-color:#ff9019;
grid-column:2/4;
grid-row-start:2; /* grid-row:2/3; */
}
.box4 {
background-color:#ffd000;
grid-column-start:3; /* grid-column:3/4 */
grid-row-start:3; /* grid-row:3/4 */
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
<div class="box box4">box4</div>
</div>
</body>
</html>
코드는 간단하다. display를 grid로 설정하고 각 박스마다 column, row 범위를 지정하여 박스 크기를 지정할 수 있다.
댓글