[HTML|CSS] Grid

Grid란?

 

아래의 모양처럼 2차원 형태의 행과 열의 레이아웃을 쉽게 잡아주는 css 속성입니다.

display의 inline-block형태로도 만들 수 있지만  grid를 사용하면 훨씬 더 간단하게 만들 수 있습니다.

1	2	3
4	5	6
7	8	9

 

 

소스

 

<style>
.grid-container{
	display:grid;
	grid-template-columns : 10% 30% auto; /*열 갯수만큼*/
}

.grid-item{
	border : 1px solid;
	text-align : center;
}
</style>

<div class="grid-container">
	<div class="grid-item">1</div>
	<div class="grid-item">2</div>
	<div class="grid-item">3</div>
	
	<div class="grid-item">4</div>
	<div class="grid-item">5</div>
	<div class="grid-item">6</div>

	<div class="grid-item">7</div>
	<div class="grid-item">8</div>
	<div class="grid-item">9</div>
</div>

 

 

결과물