CSS 반응형 그리드 - fr, repeat, minmax, max-content, min-content, auto-fit, auto-fill

1. fr

 

grid-template-columns: 1fr 1fr;

// 가로를 1 : 1 비율로 꽉채운다.

 

grid-template-columns: 1fr 1fr 1fr;

// 1 : 1 : 1

 

2. repeat()

 

grid-template-columns: repeat(4, 1fr);

// 1fr을 4번 반복한다.

 

3. minmax()

 

grid-template-columns: minmax(150px, 1fr) repeat(3, 1fr);

// 최소 크기 150px, 최대 크기 1fr

화면이 크면 1fr만큼 공간을 차지하지만

화면이 줄어들면 150px까지 줄어들고 그 이하로는 줄어들지 않는다.

 

4. max-content, min-content

 

grid-template-columns: max-content repeat(3, 1fr);

// 내용물을 가능한 한 펼쳐서 길이를 정한다.

grid-template-columns: min-content repeat(3, 1fr);

// 내용물을 가능한 한 좁혀서 길이를 정한다.

 

5. auto-fit, auto-fill

 

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

// 자식이 있는 만큼만 적용된다.

하염없이 늘어난다.

 

grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

// 자식 말고도 조건이 되면 가능한 한 빈공간으로 채운다.

150px로 나눌 수 있는 크기에 도달하면 빈 그리드를 추가한다.