CSS display: grid

display: grid

display 속성은 요소를 어떻게 보여줄지를 결정.

즉, 웹 페이지의 레이아웃을 결정하는 CSS의 속성 중 하나이다.

.container {
	display: grid;
}

 

dispaly gird는 2차원(행과 열)의 레이아웃을 만들 수 있다.

예를 들어 아래와 같이 레이아웃을 만들 수 있다.

1	2	3
4	5	6
7	8	9

 

grid-template-columns와 gird-template-rows 로 행과 열의 크기를 자유롭게 조절할 수 있다.

px로 크기를 지정해 줄 수도 있고 fr(fraction, 공간 비율)로 비율 단위로 크기를 조절할 수도 있다.

.container {
	display: grid;
	grid-template-rows: 200px 150px 150px;
	grid-template-columns: 1fr 1fr 1fr;
}

 

또한 justify-content와 align-items로 행과 열의 정열을 맞출 수 있다.

justify-content로 행 축(수평)을 정렬하고 align-items로 열 축(수직)을 정렬한다.

.container {
	display: grid;
	grid-template-rows: 200px 150px 150px;
	grid-template-columns: 1fr 1fr 1fr;
    
 	justify-content: center;
	align-items: center;
}