• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

질문이요!

21.02.06 20:41 작성 조회수 98

0

column-gap: 2%;로 수정해주세요!

라고 하셨는데

높이의 경우 무한정 늘어날 수 있기 때문에
컨테이너의 폭에 따라 카드 리스트의 높이가 넘칠 수 있어서,
이 경우에는 column-gap만 주는 것이 더 바람직합니다.

-

gap이 2%일 경우 

row-gap도 2%로 늘어날텐데

왜 무한정 늘어나는거죠?ㅠㅠ

높이가 왜 무한정 늘어나는건가요?

위 설명으로 이해가 안가요 ㅠ

어렵네요.

padding-bottom의 경우도 

width100%를 기준으로 60%까지만 늘어나게 하겠다.

한건데

column-gap만 적용했는데

왜 가로 갭은 또 띄어져있는건지..@.@

답변 1

답변을 작성해보세요.

1

row-gap을 %로 주게되면 카드가 쌓인 전체 높이를 기준으로 2%를 자치하는데요,
카드 개수가 많아서 높이가 늘어날수록 row-gap의 값도 커져서 컨테이너 영역을 벗어나는 경우가 생길 수 있답니다.

padding-bottom: 60%로 카드의 높이를 확보한 것은 카드 영역 자체의 높이에 해당되는 것이고, 사이 공간은 column-gap이 띄운 것이라고 생각하시면 됩니다^^
유체 그리드 개념 + 반응형에 익숙하지 않은 Grid까지 들어가다보니 헷갈릴 수 있는 여지가 많네요~~