min-content, max-content, minmax 활용과 css grid의 auto-fit, auto-fill

min-content와 max-content 활용

이름에서 알 수 있듯이 min-content는 최소한의 컨텐츠 크기를, max-content는 최대한의 컨텐츠 크기를 가지게 해주는 값입니다.

위의 코드를 봐주세요. 해당 코드에 우리는 가운데 아이템에 "this is long text"라는 구문을 넣었고, 아이템들을 감싸고 있는 컨테이너에는 그리드를 선언하고 가운데 트랙의 값을 min-content를 주었습니다.

min-content가 적용되어있습니다.

우리가 적은 구문이 어떻게 되어 있나요? 띄워쓰기 한 부분을 기준으로 컨텐츠가 내려가 있고, 컨텐츠를 유지하는 가장 최소의 공간은 가지고 있습니다. 이렇게 만들어주는 것이 "min-content"입니다. 그럼 max-content는 어떻게 될까요?

max-content가 적용된 모습입니다.

텍스트가 차지할 수 있는 최대의 공간은 모든 텍스트가 한 줄로 표현될 수 있는 공간입니다. 그래서 max-content로 값을 바꾼 위의 사진은 텍스트 글귀가 줄바꿈 되어 있지 않고 온전히 유지됩니다. 

위의 단위들과 min-max 활용하기

css grid에서 자주 사용하는 함수 중에 minmax가 있습니다. minmax는 2가지 인수를 가지는데, 이름에서도 알 수 있듯이 최소값과 최대값을 가집니다. 어떻게 같이 활용할 수 있을까요? 바로 최소값에 이 단위들을 넣어주심 됩니다.

트랙의 값을 위의 소스코드로 바꿨습니다. 가운데 트랙이 어떻게 바뀌었을까요?

가운데 트랙의 값은 minmax(max-content, 1fr)입니다.

우선은 다른 상자들과 똑같은 길이를 가지고 있습니다. 각각 1fr의 크기를 가지고 있습니다. 하지만 크기가 줄어들게 되었을 때(반응형) minmax의 진가가 들어납니다.

계속 크기가 줄어들다가 가운데 상자는 텍스트를 유지하는 길이까지만 줄어들고 더 이상 줄어들 지 않습니다. 만약 최소값이 min-content였다면 상자가 더 줄어들었겠죠? minmax는 그리드를 사용할 때 같이 자주 사용합니다. min-content, max-content와 함께 꼭 외워두세요.

minmax(200px, 400px)과 같은 형태도 당연히 가능하겠죠? 해당 값은 200px 보다 작아지지는 않고 400px보다 커지지는 않게 만들어줍니다.

아이템의 갯수를 알 수 없을 때 auto-fit, auto-fill을 사용합니다.

minmax를 포스팅하면 auto-fit과 auto-fill을 함께 다루는 이유는 같이 사용하는 경우가 많기 때문입니다. auto-fit과 auto-fill은 언제 사용할까요? api를 받아오는 등 우리가 정확히 아이템의 갯수를 알 수 없을 때 우리는 auto-fit과 auto-fill을 사용합니다. 트랙에 값을 정확히 알 수 없을 때 해당 값들을 넣어주면 됩니다.

위와 같은 소스코드가 있습니다. 그리드가 선언된 두 개의 컨테이너가 아이템 갯수도 똑같습니다. 화면에는 어떻게 나타날까요?

auto-fill과 auto-fit

 

차이는 눈에 바로 보입니다. 따로 트랙 숫자를 지정해 주지 않았지만 아이템에 맞게 공간을 둘다 채웠습니다. 하지만 auto-fill(위의 그림)은 그리드 영역을 다 채우지 않았지만, auto-fit은 그리드 영역을 다 채웠습니다. 왜 이렇게 될까요? 개발자 모드를 켜보면 답이 나옵니다.

크롬 개발자 모드를 사용했습니다.

auto-fill에 엘리먼트를 검사해보면 위와 같이 보입니다. auto-fill(윗 그림)에 가상의 아이템들이 만들어져 있는 것이 보이나요? 둘 다 아이템을 그리드 상자안에 채웁니다. 하지만 차이는 auto-fill은 minmax 부분에서 최소값(우리의 경우 50px)이 들어갈 수 있는 공간을 일단 (가상으로라도) 다 채운 뒤에 채우지 못하는 부분(우리의 경우1~49px)을 아이템들이 나눠가지게 됩니다.(max부분이 1fr이기 때문입니다.) 하지만 auto-fit은 아이템의 갯수가 그리드 공간에 최대를 차지할 수 있게 채운 뒤에(max 값이 1fr을 우선 신경씁니다.) 공간이 작아져서 최소값(우리의 경우50px)을 유지못하게 될 때 아이템을 내리게 되는 것입니다.

 화면 크기를 줄여보세요. auto-fill로 설정된 부분은 조금 늘어나다가 다시 50px로 유지되는 것을 볼 수 있습니다. 이는 위의 설명처럼 아이템이 들어가지 못하는 크기를 나눠가지다가 아이템이 들어갈 수 있는 크기가 되면 다시 50px이 되는 것입니다.