Grid - min content, max content

min-content와 max-content를 알아보자

 

예를들어 텍스트가 적힌 태그가 있다고 하자 

이상태에서 

첫번째 칼럼은 min-content를 두번째 칼럼은 max-content를 주면

이렇게 ! 바뀐다. 태그안에 컨텐츠가 어떻게 보여야 하는지 나타내 줄때 매우 용이하다

두번째 처럼 안에 제목같은 텍스트가 반응형에서 움직이지 않아야 할때 그리고 문장이 최소 단위로만 표기되기만 하면 될때

이 두가지를 잘 섞어 사용하면 된다.

 

그리고 이것을 minmax & repeat과 함께 사용할 수 잇는데

예를 들어 보자

서로 다른 길이의 문장들이 있다.

grid-template-columns: repeat(6, minmax(max-content, 1fr)); css에 이렇게 스타일을 줘보겠다

6개의 칼럼이 반복되고 최소 max-content의 크기를 유지하고 최대 1fr씩을 줘라 라는 명령이라고 보면된다

브라우저가 커져서 빈공간이 생기면 max-content의 속성이 아닌 1fr의 속성값을 가지게 되어

이렇게 나오지만

브라우저가 줄어들게 되면?

이렇게 max-content의 속성을 유지하게 된다. 

 

auto-fit과 auto-fill과도 combine 가능하다!!!