저는 현재 CSS 그리드를 배우고 있는데 이 카드를 그리드로 나누어서 만들어 달라는 요청을 받았습니다. 제가 만들고 싶은 그리드의 사진이 첨부되어 있습니다.
실제로 이러한 모든 카드가 정렬되는 더 큰 그리드(CSS에서는 profile-grid라고 함)가 있으며, 이 더 큰 그리드의 높이는 255px입니다. 카드와 카드 내부의 그리드가 모두 이 255px 높이를 따르기를 원합니다. 카드 자체의 높이를 올바르게 설정했지만 내부 그리드의 높이는 그렇지 않습니다. 내부 그리드 자체는 2개의 행으로 구성되어 있습니다. 첫 번째 행은 이미지이고 높이가 150px이고, 두 번째 행은 1fr로 설정되어 있지만 내부 그리드의 높이가 255px이 되도록 가져올 수 없습니다. 뭔가 잘못됐나요?
https://i.stack.imgur.com/g9Eh6.png
다음은 jsFiddle 링크입니다: https://jsfiddle.net/40tnwd1o/
으아악 으아악
P粉7104789902024-04-07 11:53:54
i.stack.imgur.com/g9Eh6.png profile-grid 的高度，而不是 profile-card。 profile-card 上设置了 255px의 높이입니다.
profile-grid 上添加 height:100%에 있어야 합니다.