you’ll have to play a little with screen dimensions to see what I mean.
Say I’ve got a card, which is inside a grid row, which is taller than the card. This card is 100% height, and the inner css grid ( element) should also be 100% height. But if I put height: 100%
in the grid element, the height of all the rows are affected. They are grid areas. I would like that only the last one (.bottom-2) is filling the remaining vertical space of the outer grid cell. How to?
<code>body > div + div{
margin-top: 2em;
}
.grid{
display: grid;
height: 100vh;
}
.post-card{
border: 1px solid #000;
height: 100%;
}
.post-card a{
display: grid;
grid-template-areas:
"main"
"main"
"bottom-1"
"bottom-2";
}
.date{
grid-row: 1/2;
grid-column: 1/2;
width: fit-content;
background-color: #000;
z-index:10;
}
.image{
grid-area: main;
aspect-ratio: 16/3;
background-color: #0e0;
}
.title{
grid-area: bottom-1;
background-color: #0ee;
}
.bottom-2{
grid-area: bottom-2;
display: flex;
background-color: #ee0;
}
.share{
width: 30px;
background-color: #e0e;
}</code>
<code>body > div + div{
margin-top: 2em;
}
.grid{
display: grid;
height: 100vh;
}
.post-card{
border: 1px solid #000;
height: 100%;
}
.post-card a{
display: grid;
grid-template-areas:
"main"
"main"
"bottom-1"
"bottom-2";
}
.date{
grid-row: 1/2;
grid-column: 1/2;
width: fit-content;
background-color: #000;
z-index:10;
}
.image{
grid-area: main;
aspect-ratio: 16/3;
background-color: #0e0;
}
.title{
grid-area: bottom-1;
background-color: #0ee;
}
.bottom-2{
grid-area: bottom-2;
display: flex;
background-color: #ee0;
}
.share{
width: 30px;
background-color: #e0e;
}</code>
body > div + div{
margin-top: 2em;
}
.grid{
display: grid;
height: 100vh;
}
.post-card{
border: 1px solid #000;
height: 100%;
}
.post-card a{
display: grid;
grid-template-areas:
"main"
"main"
"bottom-1"
"bottom-2";
}
.date{
grid-row: 1/2;
grid-column: 1/2;
width: fit-content;
background-color: #000;
z-index:10;
}
.image{
grid-area: main;
aspect-ratio: 16/3;
background-color: #0e0;
}
.title{
grid-area: bottom-1;
background-color: #0ee;
}
.bottom-2{
grid-area: bottom-2;
display: flex;
background-color: #ee0;
}
.share{
width: 30px;
background-color: #e0e;
}
<code><div class="grid">
<div class="post-card image-title-cta">
<a href="#">
<div class="date">date</div>
<div class="image">image</div>
<div class="title">title</div>
<div class="bottom-2">
<div class="cta">cta</div>
<div class="share">share</div>
</div>
</a>
</div>
</div></code>
<code><div class="grid">
<div class="post-card image-title-cta">
<a href="#">
<div class="date">date</div>
<div class="image">image</div>
<div class="title">title</div>
<div class="bottom-2">
<div class="cta">cta</div>
<div class="share">share</div>
</div>
</a>
</div>
</div></code>
<div class="grid">
<div class="post-card image-title-cta">
<a href="#">
<div class="date">date</div>
<div class="image">image</div>
<div class="title">title</div>
<div class="bottom-2">
<div class="cta">cta</div>
<div class="share">share</div>
</div>
</a>
</div>
</div>