728x90
반응형
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)로 되어있다.
뭔지 헷갈렸는데...

갑자기 퉁!하고 커져버린다. 1fr 의 크기를 넘어버림
최대크기까지 자동으로 늘어나게 라는 뜻

크기가 1fr씩 나눠갖은 만큼까지만 늘어난다.
그리드를 쓸 때마다 항상 이 글을 보는데,
https://studiomeal.com/archives/533
이번에야말로 CSS Grid를 익혀보자
이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “
studiomeal.com
이제야 좀 이해가 됐다.
참고로 글이 너무너무 좋다>ㅅ< grid 쓸 때 필수로 봐야하는 글,,,
728x90
반응형
'프론트엔드✏️ > 개인공부' 카테고리의 다른 글
[react-youtube] 재생목록 있는데 그 안에서 랜덤 재생하게 하고 싶어. (0) | 2022.11.04 |
---|---|
[css] Input Animation, Styled-Components로 바꿔서 사용하기, input selector (0) | 2022.10.28 |
[react-slick] 페이지 번호, 커스텀 화살표 (0) | 2022.10.21 |
[emotion, styled-component] 이거에 마우스 올렸을 때 저거의 가상요소가 변했으면 좋겠어! (0) | 2022.10.20 |
[react, query] 좋아요의 상태가 이상했던 이유 (0) | 2022.10.17 |