[css] grid는 어려월... repeat(auto-fill, minmax(285px, 1fr));

 

 

export const BoxWrapper = styled.div`
  display: grid;
  flex-direction: row;
  gap: 25px;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));

  @media ${breakPoints.screen4} {
    grid-template-columns: repeat(3, minmax(285px, 1fr));
  }
`;

export const SearchWrapper = styled.div`
  display: grid;
  flex-direction: row;
  gap: 25px;
  grid-template-columns: repeat(auto-fill, minmax(285px, auto));


  @media ${breakPoints.screen4} {
    grid-template-columns: repeat(3, minmax(285px, 1fr));
  }
`;

 왠진 기억이 안 나지만 BoxWrapper랑 SearchWrapper를 분리했었다.

스타일드 컴포넌트 확장 기능을 사용했다면 더 편했을 것 같은데... ^^;ㅠㅠ 

그래서 지금은 styled(BoxWrapper)로 확장했다. 물론 다른 점이 없어져버려서... 이렇게도 안 해도 되겠지만

 

아무튼 박스래퍼는 (285px, 1fr)로 되어있고 서치래퍼는 (285px, auto)로 되어있다. 

뭔지 헷갈렸는데... 

 

auto

갑자기 퉁!하고 커져버린다. 1fr 의 크기를 넘어버림

최대크기까지 자동으로 늘어나게 라는 뜻

 

 

1fr

크기가  1fr씩 나눠갖은 만큼까지만 늘어난다. 

 

 

그리드를 쓸 때마다 항상 이 글을 보는데, 

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

 

이제야 좀 이해가 됐다. 

 

참고로 글이 너무너무 좋다>ㅅ< grid 쓸 때 필수로 봐야하는 글,,,