-
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
질문이요!
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분코딩
지식공유자2021.02.14
row-gap을 %로 주게되면 카드가 쌓인 전체 높이를 기준으로 2%를 자치하는데요,
카드 개수가 많아서 높이가 늘어날수록 row-gap의 값도 커져서 컨테이너 영역을 벗어나는 경우가 생길 수 있답니다.
padding-bottom: 60%로 카드의 높이를 확보한 것은 카드 영역 자체의 높이에 해당되는 것이고, 사이 공간은 column-gap이 띄운 것이라고 생각하시면 됩니다^^
유체 그리드 개념 + 반응형에 익숙하지 않은 Grid까지 들어가다보니 헷갈릴 수 있는 여지가 많네요~~
답변 1