CSS - Grid

별다른 생각없이 html에서 영역들 혹은 아이템들을 정렬할때 써왔던 grid
단위에 대한 공부가 부족했었다.

이번 프로젝트를 하면서 정렬시 grid를 많이 사용하면서 단위의 의미를 찾아보았다.

fr?

fr이란 유연한 크기를 갖는 단위이고 그리드 컨테이너 내의 공간 비율을 분수(fraction)로 나타낸다.
사용자가 계산해야 할 부분을 fr을 통해서 쉽고 유연하게 사용할 수 있다

<div class="container">
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e">E</div>
</div>

.container{
    display: grid;
    height: 100vh;
    grid-gap: 10px;
    grid-template-rows: 2fr 300px 30px 1fr 1fr;
}
 
.box {
    background-color: rgb(201, 108, 108);
}

결과

fr값을 제외하면 300px과 30px이 남습니다. 그렇다면 우선 rows 사이즈 중 300px 30px을 할당 합니다.이후 남은 자유 공간을 총 fr만큼 분할하여 Layout의 크기를 할당 합니다.