Css GridTemplate Row & Column

Css GridTemplate Row & Column 가로 세로 항목 값

 

Css GridTemplate 개요

 

가로줄이 1줄, 세로줄이 3줄인 그리드

display:grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows:100px;

 

가로줄이 1줄, 세로줄이 5줄인 그리드

  grid-template-columns:repeat(5, 1fr);  /* 너비가 같은 column 5개 */
  grid-template-rows: minmax(200px, auto);  /* 줄 높이 최소 200px */

 

예제

html코드

<style>
	#gridtemplateid1 {
		display: grid;
		grid-template-columns: 100px 100px 100px;
		grid-template-rows: 30px 40px;
	}
</style>

<div id="gridtemplateid1">
    <div class="gridclass1">
		내용1
	</div>
	<script>
		gt = document.querySelector("#gridtemplateid1");
		go = document.querySelector(".gridclass1");
		for (i = 0; i < 30; i++) {
			gt.appendChild(go.cloneNode(deep = true));
		}
	</script>
</div>

html실행

내용1