Kendrick's Blog

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천해 드립니다.fr?fr이란 유연한 크기를 갖는 단위입니다. 그리드 컨테이너 내의 공간 비율을 분수(fraction)로 나타냅니다.사용자가 계산해야 할 부분을 fr을 통해서 쉽고 유연하게 사용할 수 있습니다..grid { display: grid; grid-template-columns: auto 100px 1fr 2fr;}1번 열은 auto를 사용한다. 해당 Element 내부 콘텐츠에 맞게 사이즈가 조정된다.2번 열은 100px을 할당한다. 100픽셀 크기만큼의 폭을 차지한다.3번 열은 1fr 크기를 할당한다. 1fr이란 남은 자유 공간의 1/3(총fr)만큼의 크기를 할당한다.4번 열은 2fr 크기를 할당한다. 2fr이란 남은 ..

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천드립니다. fr 단위를 이용하여 grid 나누기이번 코드에서 중요 포인트는 fr단위입니다.보기아래 css를 보시죠.container { display: grid; height: 100vh; grid-template-columns: 1fr 4fr 1fr; grid-gap: 10px 100px; margin: 10px;} .grid-item { background-color: rgb(74, 173, 228);}grid-template-columns를 보시면 1fr + 4fr + 1fr => 총 6개의 fragment로 나눕니다.데모를 보시면 바로 이해가 가실겁니다.하지만 특이한 점이 있는데 grid-gap이 위에서 나눈 fragmen..