gap, padding-bottom

1. 그리드 컨테이너의 width와 height 기준입니다.

2. 네 맞습니다.

3. 아.. 이 부분은 코드 수정이 필요하겠네요;
gap을 %로 주어서 그런건데요,
1번에서 답변 드렸듯이 gap을 %로 줄 경우에는 컨테이너의 크기가 기준이 되는데
카드 리스트의 경우 높이가 무한정 늘어날 수 있기 때문에
%값을 사용할 경우엔 column-gap만 주어야 하는데 제가 실수로 gap으로 했네요;
gap: 2% 대신 column-gap: 2%로 하시면 됩니다.
어차피 세로 간격은 .card-item에 margin-bottom이 있으므로 row-gap은 안써도 되는 것이고요.
(gap: 20px; 과 같이 고정값은 상관 없고, %로 할 경우에만 이야기입니다.)

콘텐츠 업데이트 하도록 하겠습니다.
동우님 덕분에 발견했네요.. 넘 감사드립니다! ^^;;

height를 0으로 해놓는건 알겠는데 padding-bottom: 60% 이부분을 부모 width의 60%로 잡겠다는 말이 이해가 안가네요 ㅠㅠ 만약에 부모의 가로넓이가 20이면 자식 엘리먼트 높이는 12(20x60%)라는건가요??? ㅠㅠ 왜 백분율쓰면 갑자기 난데없이 부모 가로를 참조하는지 이해가안가네요...ㅠㅠ

3. 스크린샷을 보시면 푸터 부분을 침범하는데 이것 같은 경우는 어떻게 방지하는게 좋을까요?

맞습니다 프린이님~ 그건 padding의 특성인데요, padding은 상하좌우 값 모두 부모 엘리먼트의 width를 100% 기준으로 해서 계산하게 되어있기 때문에 그렇습니다.
그래서 그냥 padding: 10%; 이런 식으로 하게되면, 상하좌우 패딩의 값이 똑같은걸 확인하실 수 있을거에요.

답변 감사합니다 ^^