Search code examples
htmlcsscss-grid

Adapt banner height according its own content

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.

enter image description here

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?

Solution

  • 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>