grid-template-areas 도 편했지만
grid-template-columns, grid-template-rows를 명시해줘야만 했다.
충분히 편한데, 더 편한 숏컷이 있다.
grid-template 속성에 grid-template-area를 똑같이 적어주되, 한 행마다 높이(height)를 적어주고마지막에는 /와 함께 각 열의 폭(width)을 적어주는 것이다.
.wrapper {
display: grid;
gap: 10px;
height: 50vh;
grid-template:
"header header header header" 1fr
"content content content nav" 2fr
"footer footer footer footer" 1fr /1fr 1fr 1fr 1fr
}
.header {
background-color: lightblue;
grid-area: header;
}
.content {
background-color: lightcoral;
grid-area: content;
}
.nav {
background-color: lightgoldenrodyellow;
grid-area: nav;
}
.footer {
background-color: blue;
grid-area: footer;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>title</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="nav"></div>
<div class="footer"></div>
</div>
</body>
</html>
결과물은 다음과 같다.
유일한 단점은 repeat를 쓸 수 없다는 것이다.
'웹 전반, 브라우저 > SCSS, CSS-flex-grid' 카테고리의 다른 글
| CSS Preprocessor : SCSS (0) | 2020.08.01 |
|---|---|
| Grid 살펴보기 (0) | 2020.03.13 |
| Flexbox 제대로 활용하기 (flex-grow, flex-shrink, flex-wrap etc) (0) | 2020.03.08 |
