Css GridTemplate 'auto-fit' 'auto-fit'

 

 

 

auto-fill or auto-fit

auto-fit: repeat(n, minmax())함수와 함께 사용할 경우 화면 크기에 맞춰 내용을 반복 배치한다.

auto-fill: repeat(n, minmax())함수와 함께 사용할 경우 최소 크기로 반복 배치한다.

 

예제

 

<style>
	#gridtemplateid_fit {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
	}

	#gridtemplateid_fill {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
	}
</style>

<p>AutoFit</p>
<div id="gridtemplateid_fit">
	
	<div class="gridclass1">
		내용1
	</div>
	<script>
		var gt1 = document.querySelector("#gridtemplateid_fit");
		var go1 = document.querySelector(".gridclass1");
		for (var i1 = 0; i1 < 5; i1++) {
			gt1.appendChild(go1.cloneNode(deep = true));
		}
	</script>
	<div class="gridclass1">
		내용1 asf lksaj lksjal j lsjf lsjdfkl jsldkfjals jflsafd
	</div>

</div>

<p>-------------</p>

<p>AutoFill</p>
	
<div id="gridtemplateid_fill">
	<div class="gridclass1">
		내용1
	</div>
	<script>
		var gt2 = document.querySelector("#gridtemplateid_fill");
		var go2 = document.querySelector(".gridclass1");
		for (var i2 = 0; i2 < 5; i2++) {
			gt2.appendChild(go2.cloneNode(deep = true));
		}
	</script>
	<div class="gridclass1">
		내용1 asf lksaj lksjal jasl lkjslkdj lsjf lsjdfkl jsldkfjals jflsafd
	</div>

</div>

AutoFit

내용1

내용1 asf lksaj lksjal j lsjf lsjdfkl jsldkfjals jflsafd

-------------

AutoFill

내용1

내용1 asf lksaj lksjal jasl lkjslkdj lsjf lsjdfkl jsldkfjals jflsafd