CSS Grid의 minmax(), auto-fill, auto-fit

CSS Grid의 minmax(), auto-fill, auto-fit 개념

---

1. minmax()의 개념

minmax()는 그리드 칸의 최소 크기와 최대 크기를 동시에 설정하는 함수입니다.
즉, 칸이 너무 작아지거나 너무 커지지 않게 크기의 한계를 지정해주는 역할을 합니다.

 

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

이 예시에서

• 150px → 칸의 최소 크기입니다.
• 1fr → 칸의 최대 크기(비율 단위)입니다.

즉, 화면이 좁을 때는 150px까지만 줄어들고,
화면이 넓어지면 공간을 비율로 늘려 유연하게 확장됩니다.

핵심 개념 요약:

• minmax(최소값, 최대값)
• 칸의 크기를 **“줄어들 수 있는 한계”와 “늘어날 수 있는 한계”**로 묶음
• 반응형 레이아웃에서 칸이 자연스럽게 크기 변화를 가질 수 있도록 함

1-1 예시

• 최소 높이와 최대 높이를 설정할 수 있음.

      display: grid;
      grid-template-columns: repeat(3,1fr);
      grid-template-rows: repeat(3,minmax(100px,auto));

---

2. auto-fill의 개념

auto-fill은 가능한 한 많은 칸을 자동으로 채워 넣는 옵션입니다.
즉, 화면에 들어갈 수 있는 만큼 칸을 반복해서 만들어 채웁니다.

 

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

이 코드의 의미는

• 각 칸은 최소 150px, 최대 1fr로 설정되고,
• 화면 폭이 넓으면 가능한 한 많은 칸을 만들어 자동으로 채운다는 뜻입니다.

하지만 주의할 점은, 남는 공간이 있어도 비어 있는 칸이 생길 수 있다는 점입니다.
즉, 자동으로 칸을 “만들 뿐”, 그 칸을 실제 요소로 “꽉 채워주지는 않습니다.”

 

2-1. 예시

    .grid-container{
      display: grid;
      grid-template-columns: repeat(auto-fill,minmax(20%,auto));
      
    }

 

• 갯수를 자동으로 채워진다.
• 20%니까 5개씩 채워진다.

 

auto-fill:200px;

위에처럼 하면 반응형처럼 200px로 갯수가 늘어나고 줄어들고 한다.

---

3. auto-fit의 개념

auto-fit은 auto-fill과 매우 비슷하지만, 남는 공간이 생길 때 칸을 “접어서 없애주는” 방식입니다.
즉, 빈 칸이 남지 않고, 실제 요소가 있는 칸만 화면 크기에 맞게 확장됩니다.

 

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

이 코드는 auto-fill과 거의 같지만,

• 빈 칸이 남을 경우 자동으로 접어서 없애고,
• 실제 존재하는 요소들만으로 폭을 꽉 채웁니다.

즉, 화면이 넓어져도 남는 칸 없이 요소들이 늘어나며 공간을 채우는 동작을 합니다.

 

3-1 예시

 

갯수가 모잘라도 자동으로 채워준다.