grid

minmax

화면 줄였을 때 스크롤이 생기더라도 크기 보장해준다

.grid {
  color: white;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(10, minmax(100px, 1fr));
  grid-template-rows: repeat(4, 100px);
}

화면 줄였을때는 scroll 생성하며 100px 보장해주고
화면이 커졌을 때는 grid container를 가득 채워준다

auto-fill & auto-fit

auto-fill

가능한한 많은 cell 만든다 (비어있더라도)

auto-fit

elements 들을 늘려서 딱 맞게 만든다(stretch!)

.auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

반응형

큰화면

화면이 커졌을 때 차이가 나타난다

작은화면

스크롤은 생기지 않고 아래로 내려온다

사용

몇개의 item이 오는지 모를 때 유용하다

element 추가됬을 때

아이템이 추가 될 경우 auto-fill 인 경우 빈 공간중 하나를 주게 되지만 auto-fit 은 각각의 비율을 줄이며 공간을 주게 된다 (큰 화면일 때)