▶ 모바일 사이즈에선 박스들이 전부 세로로 진열되어야한다. → media query이용
[큰 화면]
[모바일 사이즈 화면]
[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css_grid.css" rel="stylesheet">
</head>
<body>
<div class="grid-container">
<div class="grid-nav"></div>
<div class="grid-sidebar"></div>
<div class="grid-content"></div>
<!-- <div></div>
<div></div>
<div></div>
<div></div>
<div></div> -->
</div>
</body>
</html>
[CSS]
.grid-container {
display: grid;
grid-gap: 5px;
/* 세로칸 개수, 사이즈 */
grid-template-columns: 1fr 1fr 1fr 1fr;
/* 가로칸 개수, 사이즈 */
grid-template-rows: 100px 100px 100px;
grid-template-areas:
"헤더 헤더 헤더 헤더"
"사이드 내용 내용 내용"
"사이드 내용 내용 내용";
}
.grid-container div {
border: 1px solid black;
}
.grid-nav {
grid-area: 헤더;
/* 세로선 1-5까지 차지해주세요
grid-column: 1 / 5; */
}
.grid-sidebar {
grid-area: 사이드;
/* grid-row: 2 / 4; */
}
.grid-content {
grid-area: 내용;
/* grid-column: 2 / 5;
grid-row: 2 / 4; */
}
@media screen and (max-width : 768px){
.grid-container {
grid-template-areas:
"헤더 헤더 헤더 헤더"
"사이드 사이드 사이드 사이드"
"내용 내용 내용 내용";
}
}