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

min-content와 max-content 활용

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

	<style>
	.wrapper{
	display: grid;
	grid-template-columns: 1fr min-content 1fr;
	grid-template-rows: 150px;
	}
	</style>
	<div class="wrapper">
	<div class="item"></div>
	<div class="item">this is long text</div>
	<div class="item"></div>
	</div>

view raw index.html hosted with ❤ by GitHub

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

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

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

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

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

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

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

grid-template-columns: 1fr minmax(max-content, 1fr) 1fr;

view raw style.css hosted with ❤ by GitHub

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

가운데 트랙의 값은 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을 사용합니다. 트랙에 값을 정확히 알 수 없을 때 해당 값들을 넣어주면 됩니다.

	<style>
	.container {
	margin: 40px;
	background-color: #00d2d3;
	padding: 10px;
	display: grid;
	grid-gap: 8px;
	grid-template-rows: 50px;
	grid-auto-rows: 50px;
	}
	.container:first-child {
	grid-template-columns: repeat(auto-fill, minmax(50px, 1fr))
	}
	.container:last-child {
	grid-template-columns: repeat(auto-fit, minmax(50px, 1fr))
	}
	.item {
	background-color: #feca57;
	}
	</style>
	<!-- 바디부분 -->
	<div class="container">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	</div>
	<div class="container">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	</div>

view raw index.html hosted with ❤ by GitHub

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

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이 되는 것입니다.