Grid 연습하기 - 그리드 가든
Flexbox는 1차원 레이아웃 시스템인 반면, Grid는 2차원 레이아웃 시스템이다. 열과 행을 모두 같은 수준으로 제어, 커스터마이징 가능하다.

부모 요소 속성

---

grid-template-rows, columns

grid-template-columns: 100px 200px 30px;
grid-template-rows: 200px 100px;
grid-template-columns: repeat(2, 1fr 2fr); /*repeat 함수 사용*/
grid-template-rows: repeat(2, 1fr); 

자식 요소 속성

---

grid-row, column

grid-row : 1 / 3; /*시작~끝*/
grid-column : 2 / -1;

span - 현재 행/열부터

grid-row: span 2; /*행 2개를 차지한다*/
grid-column: 2 / span 2; /* 시작 라인 : 2, 열 2개 차지*/

grid-auto

grid-auto-rows: 1fr; /*추가 행을 가지게 되는 상황이 오면 사이즈를 자동으로*/
grid-auto-columns: 1fr;
grid-auto-flow: column; /*default: row, 열로 추가됨*/

반응형 - autofit, autofill

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
/*열을 최대한 많이. 내용물이 비어있더라도. */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
/*꽉 채움*/