사과먹는중
당근먹는하니
귀엽고 행복해
당근먹는하니
전체 방문자
오늘
어제
  • 분류 전체보기 (274)
    • 다람쥐🐿 (26)
    • C++ 공부빵야 (7)
    • 공부👻 (5)
    • 프론트엔드✏️ (228)
      • 코드캠프 (120)
      • 팀 프로젝트✨ (31)
      • 개인공부 (67)
    • 프론트엔드 - 바닐라js (7)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 자바스크립트
  • 회고
  • ssg
  • react
  • 코드캠프
  • 팀프로젝트
  • refreshtoken
  • JS
  • typescript
  • 프론트엔드
  • 배열
  • 공통 컴포넌트
  • 코딩 부트캠프
  • 팀 프로젝트
  • 프로그래머스
  • CSS
  • next.js
  • graphql
  • 알고리즘
  • javascript
  • 팀플
  • emotion
  • javascrpit
  • 리액트
  • 코딩
  • React-hook-form
  • algorithm
  • HTML
  • 배포
  • 부트캠프

최근 댓글

최근 글

티스토리

250x250
반응형
hELLO · Designed By 정상우.
당근먹는하니
프론트엔드✏️/개인공부

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

[css] grid는 어려월... repeat(auto-fill, minmax(285px, 1fr));
프론트엔드✏️/개인공부

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

2022. 10. 24. 10:34
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)로 되어있다. 

뭔지 헷갈렸는데... 

 

auto

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

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

 

 

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
    '프론트엔드✏️/개인공부' 카테고리의 다른 글
    • [react-youtube] 재생목록 있는데 그 안에서 랜덤 재생하게 하고 싶어.
    • [css] Input Animation, Styled-Components로 바꿔서 사용하기, input selector
    • [react-slick] 페이지 번호, 커스텀 화살표
    • [emotion, styled-component] 이거에 마우스 올렸을 때 저거의 가상요소가 변했으면 좋겠어!
    당근먹는하니
    당근먹는하니

    티스토리툴바

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.