Grid Template

작지만 놀라운 기능을 배울것이다 그 첫번째는 fr이며 ‘fraction(부분)’이라는 뜻이다. repeat에서 치수가 들어간 부분을 1fr로 수정하면 body의 width 전부 채워진다.

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 100px);
}
.header {
  background-color: #2ecc71;
}
.content {
  background-color: #3498db;
}
.nav {
  background-color: #8344ad;
}
.footer {
  background-color: #f39c12;
}

fraction은 사용 가능한 공간을 뜻한다. 그리고 이 코드는(repeat(4, 1fr);) 1fr을 4번 반복한 것이다. 조합해보면 사용 가능한 공간을 4번 반복하여 가진다는 뜻이 된다.

여기서 가능한 공간 이란건 grid container이란 뜻이다.⭐⭐⭐

.grid {
  display: grid;
  width: 500px;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 100px);
}

이제 fr로 px과 같이 고정된 크기를 지정안해도 동적인 표현이 가능해 지는 것이다. 마치 %처럼 말이다. 만약 초록색 cell이 다른것보다 4배 커지게 한다고 하면 다음과 같이 소스를 구현하면된다.

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 4fr 1fr 1fr 1fr;
  grid-template-rows: repeat(4, 100px);
}

정말 멋진 일이다! %로도 구현이 가능하지만 단지 숫자만으로 몇 배율로 나눠서 계산하는지 안해도 된다. row도 마친가지고 fr를 사용하는데 여기서 paren elemen의 높이가 없기 때문에 height attribute를 줘서 표시를 사용한다.

.grid {
  display: grid;
  gap: 10px;
  height: 50vh;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

이번에는 grid-template를 grid areas로 사용해 볼 것이다.

.grid {
  display: grid;
  gap: 10px;
  height: 50vh;
  grid-template:
    "header header header header" 1fr
    "content content content nav" 1fr
    "content content content nav" 1fr
    "footer footer footer footer " 1fr / 4fr 1fr 1fr 1fr;
}
.header {
  background-color: #2ecc71;
  grid-area: header;
}
.content {
  background-color: #3498db;
  grid-area: content;
}
.nav {
  background-color: #8344ad;
  grid-area: nav;
}
.footer {
  background-color: #f39c12;
  grid-area: footer;
}

위코드에서 grid areas와 똑같이 layout을 지정하였지만 여기서 다른점은 grid-template-coloum과 row가 없고 대신 fr이 쓰였다는 것이다. 그리고 colum영역을 다음과 같이 추가하여 column을 함께 채웠다. 여기서 template column을 repeat을 사용할 수 있다고 생각할 수 있지만 적용이 안된다.

 / 4fr 1fr 1fr 1fr;