![[CSS Grid] 영역 이름 사용하기 grid-template-areas](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcOAhwW%2FbtrHwl81kiD%2F5ci2wO3CYQIwI6VFCkKKU1%2Fimg.png)
grid-template-areas
각 영역에(Grid Area)에 이름을 붙이고, 그 이름을 이용해서 배치하는 방법입니다.
위 레이아웃을 grid-teplate-areas로 표현하면 다음과 같습니다.
.container {
grid-template-areas:
"header header header"
" a main b "
" . . . "
"footer footer footer";
}점은 빈칸을 의미합니다.
사용방법
우선 다음과 같은 html 파일이 있습니다.
<body>
<div class="grid-container">
<div class="header grid-item">Header</div>
<div class="sidebar-a grid-item">Sidebar A</div>
<div class="sidebar-b grid-item">Sidebar B</div>
<div class="main grid-item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem voluptatibus quam rerum facilis sit fuga asperiores totam dolor qui, animi blanditiis recusandae aperiam nemo inventore unde voluptatum officia eveniet at molestiae, exercitationem repudiandae nam eum. In dignissimos ipsam alias deserunt deleniti asperiores inventore nisi consequuntur, minus fuga placeat incidunt necessitatibus voluptatum nostrum tempore, dolorem facilis temporibus recusandae eum eligendi ullam. Itaque quos fugit porro sunt velit? Cumque quod accusantium excepturi earum temporibus vitae incidunt laboriosam magnam ipsa fugiat! Ad rem consectetur, nisi et possimus hic ullam fugit quibusdam molestiae ab quas itaque? Impedit aliquid dolorem ipsa ex quod animi inventore ab, asperiores distinctio nulla ducimus exercitationem accusantium debitis, incidunt cupiditate commodi! Quis modi architecto itaque sequi mollitia cupiditate accusamus fugit explicabo dolorum repellendus consequuntur labore culpa, magnam sunt at obcaecati quisquam exercitationem libero. Architecto officia expedita cupiditate possimus eveniet nemo quibusdam dolor? Commodi tempora accusamus doloremque nisi quasi suscipit non, deleniti veniam illum consectetur libero animi voluptate modi officiis. Nobis cum in soluta provident hic, ullam consequuntur officia ab ipsa quae nihil vitae sapiente est. Aliquam aut odit, facere porro voluptatibus voluptatum dolorum eveniet eius molestias similique, voluptate consequatur provident culpa perspiciatis fuga iusto alias. Dicta soluta ducimus debitis nulla.
</div>
<div class="footer grid-item">Footer</div>
</div>
</body>
한번 그리드를 사용해서 레이아웃을 다음과 같은 형태로 짜보세요!
더보기
<style>
.grid-container {
display: grid;
gap: 1rem;
grid-template-columns: 1fr 3fr 1fr;
}
</style>
그러면 이제 각 tag의 class 와 grid 에서 사용할 이름을 매칭 시켜줘야해요!
다음처럼 말이죠.
<style>
/* grid-template-areas */
.grid-container {
display: grid;
gap: 1rem;
grid-template-columns: 1fr 3fr 1fr;
}
.header { grid-area: header; }
.sidebar-a { grid-area: sidebar-a; }
.sidebar-b { grid-area: sidebar-b; }
.main { grid-area: main; }
.footer { grid-area: footer; }
</style>
그러면 이제 grid-tempate-areas 를 사용할 수 있게 됩니다. 다음 처럼 말이죠.
<style>
/* grid-template-areas */
.grid-container {
display: grid;
gap: 1rem;
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas:
" . header header"
"sidebar-a main sidebar-b"
"footer footer footer";
}
.header {
grid-area: header;
}
.sidebar-a {
grid-area: sidebar-a;
}
.sidebar-b {
grid-area: sidebar-b;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
</style>짜잔 멋지네요..
grid-tempate-areas 은 다음처럼도 코딩이 가능합니다.
none 을 사용하거나,
grid-template-areas:
" none header header"
"sidebar-a main sidebar-b"
"footer footer footer";...... 처럼 . 을 여러번 사용할 수도 있습니다. 이때 띄어쓰기만 되지 않으면 됩니다.
grid-template-areas:
" ........ header header"
"sidebar-a main sidebar-b"
"footer footer footer";
저는 가독성이 none 이 좀더 명확해서 좋은 것 같다고 생각했는데 none은 문자열이라서 구별이 확 가지 않아요.
따라서 ..... 처럼 사용하는게 좋은것 같습니다.
'공부기록 > 웹 개발' 카테고리의 다른 글
| CSS 가상 셀렉터(Pseudo Selector) :active, :hover, :focus (0) | 2022.07.19 |
|---|---|
| CSS 초기화 하는 방법 (0) | 2022.07.19 |
| [CSS Grid] grid-column, grid-row (0) | 2022.07.17 |
| [CSS] Grid grid-auto-rows (0) | 2022.07.17 |
| [CSS] Grid - gap (0) | 2022.07.17 |