CSS Subgrid, вызывая нежелательный разрыв ⇐ Html

[Anonymous]

У меня есть сетка CSS с «картами», которая может иметь дополнительное содержание в середине. В картах я использую сетку-образные строки: subgrid , чтобы строки контента на каждой карте могли соответствовать другим картам. Я использую строку: 50px для разбивания карт друг от друга, но затем я использую строку: 0 в карте, потому что я не хочу наследовать разрыв в карте. Он всегда привязан к сетке родительской сетки. Кто -нибудь может объяснить, что мне не хватает? />

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

.grid {
display: grid;
grid-template-columns: 150px 150px 150px;
grid-auto-rows: min-content;
column-gap: 15px;
row-gap: 50px;
}
.card {
border: 1px solid black;
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
row-gap: 0;
}
.topRow {
grid-row: 1;
}
.middleRow {
grid-row: 2;
}
.bottomRow {
grid-row: 3;
}
body {
font-size: 26px;
}< /code>
  

Top Row
Middle Row
Bottom Row


Top Row
Optional
Bottom Row


Top Row
Bottom Row


Top Row
Bottom Row


Top Row
Bottom Row


Top Row
Bottom Row

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