지난 포스트에 이어서 grid에 대해 알아보는 마지막 포스트이다.
Minmax
minmax는 표기된 이름과 같은 방식으로 작동한다.
grid의 셀들은 화면 크기에 맞춰서 크기가 변하는 요소가 많은데, 그 요소에 최소값과 최대값을 넣어주는것이다.
사용 방법은 이러하다.
container {
display: grid;
grid-template-columns: repeat(5, minmax(100px, 1fr));
grid-template-rows: repeat(4, 100px);
}와 같이 사용하는데, 이때 minmax가 의미하는것은 해당 셀들은 화면이 줄어들때 비율에 맞춰서 줄어들다가 셀의 길이가 100px이 되면 그 이하로는 줄어들지 않고, 반대로 화면이 늘어날때도 비율에 맞춰 커지다가 1fr 이상이 되면 더이상 커지지 않는다는 이야기이다.
Auto fit / fill
반응형 디자인에 대한 중요한 요소중 하나로, Auto fit/fill이 있다.
먼저, Auto fit은 해당 아이템의 크기가 들어갈 수 있는 최대한의 공간을 확보하는 요소이다.
1~10까지의 눈금이 있고, 1의 공간을 차지하는 아이템이 5개 있을때, 남은 5만큼의 눈금을 아이템이 차지하는 공간만큼 남겨둔다는것이다.
즉, 5까지는 아이템이 들어가지만, 빈 나머지 5개의 눈금은 그대로 아이템이 들어 갈 공백을 만들어 놓는다.
때문에 아이템이 차지하는 공간은 모두 1로 동일하다.
Auto fill은 조금 다르게 작동한다.
auto fit이 row 혹은 column에 공간을 설정한다고 하면, auto fill은 남은 공간을 모두 사용하여 아이템을 채우는 요소이다.
위의 예시를 그대로 들자면 1~10의 공간에 1의 크기를 가지는 5개의 아이템을 10의 공간에 넣기 위해서, 아이템 하나하나의 크기를 2로 늘리는 방식으로 작동하게 된다.
이 두개의 속성과 위의 minmax를 잘 조합해서 모바일에선 같은 화면이지만, 화면이 커졌을때 각 아이템들이 어떻게 반응하여 크기가 바뀔지를 설정 할 수 있다.
때문에 이 두 속성은 반응형 디자인에 있어서 상당히 중요한 부분을 차지하게 된다.
min-content / max-content
min-content와 max-content는 여백이나 box의 크기가 아니라 content의 크기를 조정하는데 초점을 맞춘 요소이다.
하나하나 보자면, min-content는 컨텐츠의 최소크기에 맞춰서 박스의 크기를 조정하고, max-content는 해당 요소가 최대크기일때의 크기에 맞춰서 box를 조정하는 요소이다.
물론, 이 요소는 box안에 있는 컨텐츠를 손상시키지 않는다. 글자가 튀어나오거나, 간격이 망가지는등의 현상 없이 크기를 조정 할 수 있는것이다.
이 요소는 위의 auto fill/fit minmax 그리고 repeat과 조합 되었을때 제 기능을 발휘 한다고 생각한다.
화면의 크기에 따라 컨텐츠를 손상시키지 않으면서 box의 크기를 조정 할 수 있으니 말이다.
우선 grid속성은 여기까지이다.
grid를 사용해서 이것저것 만들어보면서 익숙해지도록 하자.
