티스토리 뷰

Html,Css/Css

css : grid-template

YG - 96년생 , 강아지 있음, 개발자 희망 2021. 10. 18. 15:48 
<!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>

 

 

.grid {
  display: grid;
  height: 50vh;
  gap: 5px;
  grid-template:
    "header header header header" 1fr
    "content content content nav" 2fr
    "footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr;
  /* 
    grid template로 한번에 모두 적을 수 있다.
    grid area 를 모두 설정해준뒤 레이아웃을 정하고  그옆에 1fr 처럼 높이를 설정해주면 된다
    맨 마지막에는 가로비율을 어떻게 설정할지도 정해주면 된다
    fr-fraction(부분)
    fraction은 grid에서 사용 가능한 공간을 뜻한다.
    fr값 비율로 공간을 나눈다.

    ● grid-template:
    "(이름)" (row크기)
    "(이름)" (row크기)
    (이름)" (row크기)/ (각 column의 크기);
    */
}

.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;
}

 

 

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template

 

grid-template - CSS: Cascading Style Sheets | MDN

The grid-template CSS property is a shorthand property for defining grid columns, rows, and areas.

developer.mozilla.org

 

 

'Html,Css > Css' 카테고리의 다른 글

css: grid autofill , autofit  (0) 2021.10.18
css: grid minmax()  (0) 2021.10.18
css :Grid Rows and Columns  (0) 2021.10.18
css : Grid Template Areas  (0) 2021.10.15
CSS) 검색창에 아이콘, 이모티콘 넣기  (0) 2021.05.27
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함