[css]display: grid

플렉스박스는 한 방향으로 배치되지만 

그리드는 여러 방향(바둑판처럼)으로 배치가 가능함

 

원하는 위치에 자유롭게 배치 가능함

 

한칸을 그리드 셀이라함

 

grid-template-rows & columnns	격자 나누기
gap	간격
grid-auto-rows & columns	크기 미리정하기
grid-row & column, span	원하는 위치에, 여러칸에 걸쳐서 배치
grid-area, grid-template-areas	이름으로 배치

 

ex)

3 x 3 그리드 형태



display: grid

grid-template-rows: 200px 200px 200px;
grid-template-columnns : 200px 200px 200px;
또는

grid-template: 200px 200px 200px / 200px 200px 200px;  

(grid-template-rows
grid-template-columnns 
두 줄을 한줄로 줄이면 grid-template 됨)

또는 

1fr 1fr 1fr/ minmax(200px, 300px) minmax(200px, 300px); (함수 - 최소, 최대/ 1fr 넣어도됨)
또는

1fr 1fr 1fr/ repeat(6, 1fr);  < 반복되는 값을 한번에 사용 가능 (6칸 가로세로 1fr )  


3줄의 속성 화면에 출력되는게 같음

 

그리드 박스 내 요소를 원하는 위치에 배치

 

위 사진처럼  표시된 번호에 맞게 사용

부모태그가 display: grid적용하였고 
각 자식 태그의 위치를 원하는 위치로 변경하고 싶을 때 사용

grid-row: 3 / span 2;  (로우 칸 3번부터 2칸을 채워라)
grid-column: 2 / span 4; (컬럼 칸 2번부터 4칸을 채워라)

또는 
grid-row: 3 / 2; (로우 칸 3번부터 2번까지 채운다)
grid-column: 2 / 4; (컬럼 칸 2번부터 4번까지 채운다)

 

이름으로 배치하기

(자식태그에는  " " 사용하지 말것!!!!)

부모요소
grid-template-areas:
 "r g"
 "r b";
 
 
 
 자식요소
 자식태그1{
 	background-color: red;
 	grid-area: r;
 }
 
 자식태그2{
 	background-color: green;
 	grid-area: g;
 }
 
 자식태그3{
 	background-color: blue;
 	grid-area: r;
 }