이번에야말로 CSS Grid를 익혀보자

<aside> 💡 교재와 같이 소스코드 보는 것을 추천!

</aside>

1.그리드 형태 정의

1) grid-template-columns

그리드 형태를 정의 한다.

grid-template-row grid-template-columns

.grid-container {
        display: grid;
				
				/* columns를 200px, 300px, 200px로 만들 겠다.*/
        grid-template-columns: 100px 300px 200px;

        /* fr: fraction (비율), 알아서 늘어난다. (가변 크기) */
        grid-template-columns: 1fr 2fr 1fr; 

        /* 양 끝의 column은 늘어나고 가운데는 고정되어 있다.  */
        grid-template-columns: 1fr 500px 1fr; 

				/* reapeat를 사용하여 반복할 수 있다. */
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: repeat(5, 1fr)

        /* row는 fr을 사용해도 자동으로 늘어나지 않는다.=> 컨테이너 자체를 늘려야 한다.*/ 
        grid-template-rows: repeat(2, 1fr); 
				
			  /* 그리드 item의 경우 컨테이너 높이가 확보되어있으면 row는 알아서 늘어난다. */
        height: 80vh;
      }

2) minmax

최솟값과 최댓값을 지정할 수 있는 함수이다.

.grid-container {
		display: grid;
		
		grid-template-columns: repeat(3, 1fr);

		/* minmax(최솟값, 최댓값): 최소 100px 최대는 자동으로 늘어난다. */
		grid-template-rows: repeat(3, minmax(100px, auto));
}

3) auto-fill과 auto-fit

column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채운다.

.grid-container {
		display: grid;

		/* media쿼리를 쓰지 않고도 column 갯수가 변하는 반응형 레이아웃을 만들 수도 있다. */
		grid-template-columns: repeat(auto-fill, minmax(200px, auto));
	}