grid ( minmax , auto-fill, auto-fit )

minmax

minmax는 grid-template-cloums와 row에 줄 수 있는 옵션이다. colmun에 minmax를 사용하여 최소값은 100px 최대값은 1fr로 주었다. 이렇게 했을 경우 브라우저의 창이 커지면 커질수록 column의 크기는 정비례되고, 작아지면 작아지는데 100px이하로는 작아지지 않고, 가로로 스크롤이 생긴다.

브라우저를 줄였을 때 100px이하로는 내려가지 않음

row도 마찬가지로 똑같이 줄 수 있다. 이 경우에는 grid-box에 height값을 주지 않으면 적용이 안된다. 그 이유는 기본 값이 없기 때문

 

 

auto-fill, auto-fit

auto-fill과 auto-fit의 차이점에 대해서 알아보자 

아래와 같은 화면이 나타난다.

grid-tempate-columns값으로 갯수에 auto-fll 크기에 minmax(100, 1fr)을주었는데 auto-fill의 경우에는 해당 row를 가능한(하나라도 만들 공간이 있다면) column을 최대로 채우려고 한다. 심지어 빈칸채로 말이다. 위의 경우는 5개만 주었는데 아래와 같이 계속 빈 공간에 만들고 있던 것이다. 그 크기는 우리가 여기서 지정해준 min 100px의 크기로 만들어 줄 것이다.

 

( 공간이 생겼지만 하나의 column의 최소값 100px에 미치지 못한경우, 즉 80px만큼이 있는 경우는 1fr에 의해 나눠 갖게 된다.  만약 minmax를 사용하지않고 100px이렇게 값 하나만 주고 단정지었다면 칼같이 남은 공간(80px)은 냅둔다. )

auto-fit의 경우에는 현재 div들(5개)을 가져와서 얘네들을 화면에 맞게 다 늘린다.

만약 6번째 element를 추가한다면 auto-fill은 남은 자리에 들어갈 것이고 auto-fit은 기존의 element의 크기를 줄이고 거기에 집어 넣을 것이다.

 

둘다 column의 수는 정해진 것이 아니다. 화면의 크기에 맞게 column 수를 알아서 맞춰나간다.

단지 auto flll은 화면이 커지면 커질수록 최소값을 기준으로 늘려 나가는 것이고,

 

auto fit은 화면이 커지면 커질수록 최대값을 기준으로 맞춰나가는 것이다.

 

둘 다 화면이 작아지면 그 화면에 맞게 column수를 조절해나간다.