grid(3) - grid template

.grid {

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

}

grid-template-columns: repeat(4, 100px) 에서 100px을 1fr으로 바꿨다. fr 는 fraction이다.

grid-template-columns: repeat(4, 100px) 일 때 body가 남는다.

grid-template-columns: repeat(4, 1fr) 으로 바꾸면 body를 꽉 채운다. fr는 채울 수 있는 너비만큼 유동적으로 변한다. 비율로 화면을 구성할 때 매우 편리하다.

.grid {

display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 2fr);

}

이번엔 grid-template-rows에 repeat(4, 2fr)을 하니까 grid 가 사라져버린다. 이유는 fr의 높이는 0이기 때문이다. 높이를 지정해주지 않았다!

.grid {

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

}

높이를 주니 다시 살아난 grid

grid-template

grid-template는 굉장한 녀석이다. 아주 간편하게 사용자가 원하는 레이아웃을 만들어준다. grid-template을 조심스레 살펴보자.

.grid {

display: grid;
grid-gap: 10px;
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: tan;
grid-area: header;

}

각 child에 grid-area: header로 이름을 정해주고 grid-template를 만든다. "header header header header" 1fr에서 1fr은 row의 높이다. 마지막의 1fr 1fr 1fr 1fr은 각 column의 너비를 구체적으로 나타낸 것이다.

짜잔