질문이요!
163
작성한 질문수 40
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까지 들어가다보니 헷갈릴 수 있는 여지가 많네요~~
가로스크롤 과 margin: 0 -1rem 질문 있습니다
0
118
1
수업자료 다운로드
0
122
1
VS코드에 클래스 이름만 넣으셨는데 선생님이 뭘 누르면 바로 태그로 변하던데...
1
136
1
css grid repeat() 에서 autofit 사용시
0
181
1
menu 아이템 반응형 변경
0
102
1
질문은 아니고.. 오타 발견..
0
120
1
웹에서 위치?값
0
211
1
px, em ,rem을 어떻게 감각적으로 쓸 수 있을까요?
0
510
2
강의에 나오는 html 자동으로 만들어주는 편집기에 대해 알 수 있을까요?
0
309
1
flex-basis auto, 0 차이
0
709
2
padding 대신 gap을 쓰는게 더 편하지 않나요?
2
606
1
animation forwards 관련 질문
0
488
2
auto-fill, auto-fill이 적용되지 않는것 에 대해 질문드립니다.
0
559
1
flex-grow IE 질문드립니다.
0
624
2
Flex-grow가 적용되는 영역에 대해 질문드립니다.
0
437
1
Grid 수직정렬 문의
0
1075
1
card__item에 display:flex를 했을 때..
0
512
1
11vmin
0
417
1
header class 안에 div와 h2
0
576
1
grid 반응형 페이지 step1 질문있습니다~
0
281
1
반응형 페이지 step4 order
0
355
1
미디어쿼리 사이즈
1
285
1
figure + div
0
298
1
CSS Grid를 통한 정렬의 장점
0
245
1