CSS - grid

	사용 예	설명
grid	display: grid;
grid-template-columns	grid-template-columns: 100px 200px; grid-template-columns: 20% 50%; grid-template-columns: 20% 40% 60px;	열의 너비
grid-template-rows	grid-template-rows: 10% 20% 600px;	행의 높이
grid-template	grid-template: 200px 300px / 20% 10% 70%;	rows / columns
fraction (분수)	grid-template: 2fr 1fr 1fr / 1fr 60px 2fr;
repeat()	grid-template: repeat(3, 100px) / repeat(2, 10px, 20px);	repeat(갯수, 너비 혹은 높이)
minmax()	grid-template: repeat(3, 50px) / minmax(50px, 300px), 2fr;	최소최대
grid-gap	row-gap: 10px;  column-gap: 20px; gap: 10px 20px;	행 간격 열 간격 gap: row-gap column-gap;
grid-row	grid-row-start: 1; grid-row-end: 3; grid-row: 1 / 3;	행 시작 행 끝 (+1)
grid-column	grid-column-start: 4; grid-column-end: span 2; grid-column: 4 / span 2;	4 / span 2 -> 4열부터 2칸 차지
grid-area	grid-area: 2 / 3 / 4 / span 5;	row-start / column-start / row-end / column-end
grid-template-area	.상위요소 { grid-template-area: "area1 area1"                                "area2 area2";                  } .area1 { grid-area: area1; } .area2 { grid-area: area2; }	2행 2열
justify-items (수평 정렬)	justify-items: center;	start : 왼쪽 정렬 end : 오른쪽 정렬 center : 수평 중앙 정렬 stretch : 영역 채움(좌우로 늘어남)
justify-content	justify-content: center;	start : 왼쪽 정렬 end : 오른쪽 정렬 center : 수평 중앙 정렬 stretch :  영역 채움(늘어남) space-around : 동일한 공간(수평양끝 1/2) space-between : 동일한 공간(양끝제외) space-evenly : 동일한 공간(양끝 포함)
align-items (수직 정렬)	align-items: center	start : 위쪽 정렬 end : 아래쪽 정렬 center : 수직중앙 정렬 stretch : 영역 채움(위아래로 늘어남)
align-content	align-content: center	start : 위쪽 정렬 end : 아래쪽 정렬 center : 수직 중앙 정렬 space-around : 동일한 공간(수직양끝 1/2) space-between : 동일한 공간(양끝 제외) space-evenly : 동일한 공간(양끝 포함)
align-self	align-self: start;	start, end, center, stretch
justify-self	justify-self: end;
grid-auto-rows	grid-auto-rows: 50px;	px, %, fr, repeat()
grid-auto-columns	grid-auto-columns: 100px;
grid-auto-flow	grid-auto-flow: row;	row, column, dense