(i could not find a good title to describe the problem, I will change it if you suggest me a better one)
this is not the same question as this one : Grid item content “jumps” when opened
description :
i have a layout for a hero section, the top part of the website page, with some characteristics :
- this section should take the whole screen height
- elements inside this section are vertically aligned
- elements are for example : a title, a
<details>, and a subtitle - i use grid display
here is an example :
.hero {
display: grid;
min-height: 100vh;
grid-template-columns: auto;
grid-template-rows: auto 1fr auto;
> * {
border: 1px solid blue;
display: flex;
flex-direction: column;
place-content: center;
place-items: center;
}
details {
place-content: start;
}
}<div class="hero">
<h1>title</h1>
<details>
<summary>details</summary>
<p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p>
</details>
<h2>subtitle</h2>
</div>I need (do i ?) to make at least one row 1fr height to fill the whole screen height
the problem :
But if i make the details element 1fr height, the result is that the title takes up as little place as possible to the top (you might need to open the demo in full screen to see it)
If instead i make the title 1fr height, the position of the title and of the summary text will jump when i open the details :
grid-template-rows: auto 1fr auto;
becomes :
grid-template-rows: 1fr auto auto;
.hero {
display: grid;
min-height: 100vh;
grid-template-columns: auto;
grid-template-rows: 1fr auto auto;
> * {
border: 1px solid blue;
display: flex;
flex-direction: column;
place-content: center;
place-items: center;
}
details {
place-content: start;
}
}<div class="hero">
<h1>title</h1>
<details>
<summary>details</summary>
<p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p>
</details>
<h2>subtitle</h2>
</div>so, either i have the title that is compacted to the top, or the texts jumps
How can i have both the title taking a maximum space, and no jumps when the details is opened ?