CSS Grid, неожиданный пробел ⇐ CSS

[Anonymous]

Я сталкиваюсь с неожиданными пробелами при создании встроенных CSS-сеток.
Макет состоит из карточек (3 карточки в ряду) и подэлементов каждой карточки (оранжевого/серого/черного цвета). в моем примере) должны быть выровнены между собой (в одной строке). Ожидаемая максимальная высота строки должна основываться на содержимом ее ячеек. Но высота намного больше содержимого ячеек:

Код: Выделить всё

        .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 10px;
grid-column-gap: 10px;
}

.card {
display: grid;
grid-row-gap: 10px;
grid-auto-rows: 1fr;
}

.header {
background-color: orange;
}

.content {
background-color: grey;
}

.footer {
background-color: black;
color: white;
}

Код: Выделить всё

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[img]https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png[/img]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.



 Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.

[img]https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png[/img]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.



Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[img]https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png[/img]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.



 Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.

[img]https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png[/img]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.



Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[img]https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png[/img]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Что мне нужно исправить в этом макете, чтобы не было неожиданных пробелов ?

Подробнее здесь: https://stackoverflow.com/questions/782 ... pected-gap