CSS Grid Functions, Units를 정리하면서 - Grid Container의 함수

이전에 repeat함수를 사용했었다.

 

만약 반복이 일정하지 않으면 어떻게 할까?

 

예제

grid-template-columns : 100px 200px 100px 200px;

 

만약 위와 같이 일정한 패턴이 반복될 때도 아래와 같이 사용이 가능하다.

grid-template-columns : repeat(2,100px 200px);

 

 

 

minmax()

 

grid-template를 이용해 명시적으로 너비를 지정하면 빈 공간이 생길 수 있다.

grid-template-cloumns : 100px 200px

 

그러면 아래와 같이 minmax()함수를 이용해서 빈 공간을 채울 수 있다.

minmax()의 첫번째 인수는 최솟값이고, 두번째 인수는 최대 값이다.

grid-template-columns : minmax(100px,1fr) minmax(200px,1fr);

 

-위와 같이 설정하면 뷰포트가 작아지는 순간에 반응형 웹처럼 반응하는 것을 볼 수 있다.

 

 

 

 

 

grid-auto-rows에도 minmax()함수가 사용이 가능하다.

grid-auto-rows:minmax(100p,auto);

 

 

 

fit-content()

- content의 너비에 맞춰주는 함수

- fit-content(300px) : content너비에 맞추되 300px까지 맞춘다.

 -> content가 아무리 길어도 300px가 맞춰진다.

grid-template-rows: repeat: repeat(2,100px);
grid-template-columns: fit-content(300px) fit-content(300px);