높이가 예상한 것과 다른 CSS 그리드에 문제가 있습니다. 어떤 실수를 저지를 수 있습니까?

Question

저는 현재 CSS 그리드를 배우고 있는데 이 카드를 그리드로 나누어서 만들어 달라는 요청을 받았습니다. 제가 만들고 싶은 그리드의 사진이 첨부되어 있습니다.

실제로 이러한 모든 카드가 정렬되는 더 큰 그리드(CSS에서는 profile-grid라고 함)가 있으며, 이 더 큰 그리드의 높이는 255px입니다. 카드와 카드 내부의 그리드가 모두 이 255px 높이를 따르기를 원합니다. 카드 자체의 높이를 올바르게 설정했지만 내부 그리드의 높이는 그렇지 않습니다. 내부 그리드 자체는 2개의 행으로 구성되어 있습니다. 첫 번째 행은 이미지이고 높이가 150px이고, 두 번째 행은 1fr로 설정되어 있지만 내부 그리드의 높이가 255px이 되도록 가져올 수 없습니다. 뭔가 잘못됐나요?

https://i.stack.imgur.com/g9Eh6.png

다음은 jsFiddle 링크입니다: https://jsfiddle.net/40tnwd1o/

으아악 으아악