[CSS_study] display : grid_4 grid-template & fr (fraction)

* fr(fraction)

• fr(fraction)은 사용 가능한 공간을 의미한다.
• 즉 기본적으로 grid에서 가질 수 있는 만큼의 공간을 차지한다.
• fr값은 비율로 공간을 나눈다. ex) grid의 width가 작아지면 1fr의 값도 작아진다.
• 따라서 화면 크기가 변해도 비율은 그대로이다.
• 모바일에서도 호환되는 유연한 layout을 만들 수 있다.

 

* fr은 전역으로 결정되는 것이 아닌 grid container에서 결정된다.
따라서 fr을 쓰기 위해서는 grid container에 height을 명시해야 한다.

block은 width와 height가 주어져 있지 않은 경우에는 width는 가능한 한 최댓값, height은 0이다.
따라서 fr을 쓰려면 grid container에 height만 써도 동작하지만, width만 쓰면 동작하지 않는 이유가 이것이다.

 

* grid-template 사용방법

"(grid-area name)" (row높이)
"(grid-area name)" (row높이)
"(grid-area name)" (row높이)/ (각 column의 너비);

 

(참고) grid-template에서 repeat는 적용되지 않는다.

 

* gird-template 예시 코드

.grid {
  display: grid;
  gap: 5px;
  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: #2ecc71;
  grid-area: header;
}
.content {
  background-color: #3498db;
  grid-area: content;
}
.nav {
  background-color: #8e44ad;
  grid-area: nav;
}
.footer {
  background-color: #f39c12;
  grid-area: footer;
}

 

* naming 사용도 가능하다.

.grid {
  display: grid;
  gap: 5px;
  height: 50vh;
  grid-template:
    [header-start] "header header header header" 1fr [header-end]
    [content-start] "content content content nav" 2fr [content-end]
    [footer-start] "footer footer footer footer" 1fr [footer-end] / 1fr 1fr 1fr 1fr;
}

.header {
  background-color: #2ecc71;
  grid-area: header;
}
.content {
  background-color: #3498db;
  grid-area: content;
}
.nav {
  background-color: #8e44ad;
  grid-area: nav;
}
.footer {
  background-color: #f39c12;
  grid-area: footer;
}