Html,Css/Css

css : Grid Template Areas

YG - 96년생 , 강아지 있음, 개발자 희망 2021. 10. 15. 14:12

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" />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="grid">
      <div class="header"></div>
      <div class="content"></div>
      <div class="nav"></div>
      <div class="footer"></div>
    </div>
  </body>
</html>

css 코드

 

.grid {
  display: grid;
  grid-template-columns: 100px repeat(2, 200px) 100px;
  grid-template-rows: repeat(4, 200px);
  grid-template-areas:
    "header header header header"
    "content content content nav"
    "content content content nav"
    "footer footer footer footer";
}

.header {
  background-color: aqua;
  grid-area: header;
}

.content {
  background-color: brown;
  grid-area: content;
}

.nav {
  background-color: chocolate;
  grid-area: nav;
}

.footer {
  background-color: darkgreen;
  grid-area: footer;
}

CSS 를 배우면서 가장 놀랍게 다가온 기능이였다.

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Grid_template_areas

 

Grid template areas - CSS: Cascading Style Sheets | MDN

이전 가이드에서 우리는 그리드 라인에 대해서 살펴보았으며, 이 라인을 기준으로 어떻게 아이템들을 배치하는지 알아보았습니다. CSS 그리드 레이아웃으로 작업할 땐 거기엔 항상 라인이 있을

developer.mozilla.org