grid의 auto-fit / auto-fill

이전 포스팅에서 grid에 대하여 적은 글이 있다.

cheri.tistory.com/63?category=927511

Grid

 

챌린지를 진행하면서, grid에 대해 상세히 정리해야될 것 같아 포스팅을 쓴다.

---

auto-fit과 auto-fill은 행/열의 개수를 그리드 컨테이너 및 행/열 크기에 맞게 자동으로 조정한다.

이 둘의 차이를 한번 느껴보고자 한다.

 

grid-items가 총 7개로 설정하였다.

 

 

---

minmax를 쓰지 않을때! 

minmax를 쓰지 않을때는 auto-fit과 auto-fill은 같은 결과를 나타낸다.

 

body {
  font-family: sans-serif;
  height: 100vh;
  width: 100%;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, 100px); ✅
}

.grid {
  background-color: aquamarine;
}

 

 

---

minmax를 사용하여 100px,200px 적용!

 

그래도 auto-fit과 auto-fill의 차이가 없다.

body {
  font-family: sans-serif;
  height: 100vh;
  width: 100%;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 200px)); ✅
}

.grid {
  background-color: aquamarine;
}

 

---

minmax를 사용하여 100px 1fr 적용! 

 

 

auto-fit

 

auto-fill

 

1fr 처럼 정확하게 크기단위를 정해주지 않았을때, 결과가 크게 달라진다. 

auto-fit은 뷰포트의 크기만큼 아이템의 크기를 늘려주고,

auto-fill은 아이템보다 뷰포트의 크기가 커지면, 더이상 아이템은 커지지 않는다.

 

---