Adapt banner height according its own content - html

Question

I am working with grids. I have the header, banner, content and footer sections. My problem is that I need to adapt the banner height with its own content. I mean, if the text has one line, three or whatever the height of the banner should change accordingly.
The problem that I have currently is that when I have one paragraph with one line it is displayed fine but when I have more than one line the result is that the button is out of the banner container.
My code is as follows:
css
.grid {
display: grid;
grid-template-rows: 56px 80px auto 80px;
grid-template-areas:
"header"
"banner"
"content"
"footer";
grid-gap: 0;
width: 100%;
height: 100vh;
}
.grid-header {
grid-area: header;
z-index: 100;
}
.grid-banner {
grid-area: banner;
z-index: 50;
}
.grid-content {
grid-area: content;
display: grid;
height: 200px;
justify-content: center;
}
.grid-footer {
grid-area: footer;
}
html
.grid {
display: grid;
grid-template-rows: 56px 80px auto 80px;
grid-template-areas:
"header"
"banner"
"content"
"footer";
grid-gap: 0;
width: 100%;
height: 100vh;
}
.grid-header {
background-color: rgba(255, 255, 0, 0.3);
grid-area: header;
z-index: 100;
}
.grid-banner {
background-color: rgba(0, 255, 0, 0.3);
grid-area: banner;
max-height: 110px;
z-index: 50;
}
.grid-content {
background-color: white;
grid-area: content;
display: grid;
height: 200px;
justify-content: center;
}
.grid-footer {
background-color: rgba(255, 0, 255, 0.3);
grid-area: footer;
}
<div class="grid">
<div class="grid-header">
<div class="header-container">Header</div>
</div>
<div class="grid-banner">Banner</div>
<div class="grid-content">Content</div>
<div class="grid-footer">Footer</div>
Any idea?

Answer 1

There is a fixed height on grid-banner class. Try changing grid-template-rows: 56px 80px auto 80px to grid-template-rows: 56px auto 1fr 80px.
Like so -
.grid {
display: grid;
grid-template-rows: 56px auto 1fr 80px;
grid-template-areas:
"header"
"banner"
"content"
"footer";
grid-gap: 0;
width: 100%;
height: 100vh;
}
.grid-header {
background-color: rgba(255, 255, 0, 0.3);
grid-area: header;
z-index: 100;
}
.grid-banner {
background-color: rgba(0, 255, 0, 0.3);
grid-area: banner;
max-height: 110px;
z-index: 50;
}
.grid-content {
background-color: white;
grid-area: content;
display: grid;
height: 200px;
justify-content: center;
}
.grid-footer {
background-color: rgba(255, 0, 255, 0.3);
grid-area: footer;
}
<div class="grid">
<div class="grid-header">
<div class="header-container">Header</div>
</div>
<div class="grid-banner">
This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner
</div>
<div class="grid-content">Content</div>
<div class="grid-footer">Footer</div>

Answer 2

You should delete the max-height on your .grid-banner and the height on your .grid-content. For the whitespace you want you could use padding-top/bottom. Because of the max-height and the height in your classes you already defined how big the height of your banner will be. By deleting them and adding padding to the content your banner will define the height equal to the number of characters you put in it.
.grid-banner {
background-color: rgba(0, 255, 0, 0.3);
grid-area: banner;
z-index: 50;
}
.grid-content {
background-color: white;
grid-area: content;
display: grid;
padding-top: 25px;
padding-bottom: 25px;
justify-content: center;
}