[CSS] grid

grid는 flex보다 더 복잡적인 레이아웃 표현이 가능

-flex는 한방향 레이아웃

-grid는 두방향 레이아웃

 

 

grid 레이아웃을 만들기 위한 기본적인 HTML구조

<div class="container">
	<div class="item">A</div>
	<div class="item">B</div>
	<div class="item">C</div>
	<div class="item">D</div>
	<div class="item">E</div>
	<div class="item">F</div>
	<div class="item">G</div>
	<div class="item">H</div>
	<div class="item">I</div>
</div>

 

 

 

grid 설정하기

.container {
	display: grid;
}

 

 

행배치 : grid-template-rows

열배치 : grid-template-columns

 

 

예)

grid-template-columns: 200px 200px 500px;

column을 200px, 200px, 500px로 만들겠다는 의미.

 

 

grid-template-columns: 1fr 1fr 1fr;

grid-template-columns: 1fr 1fr 1fr;

※ fr(fraction)은 숫자 비율대로 트랙의 크기를 나눔.

1fr 1fr 1fr은 1:1:1 비율의 3개의 column을 만들겠다는 의미.

 

 

 

 

참고. studiomeal.com/archives/533