CSS Grid - White space on the bottom and how to remove it

Asked 31/7, 2018 at 15:23 Answered 28/6, 2022 at 6:26

I am trying to get a hold of the CSS Grid, a transition from previously using the Bootstrap that I'm used to.

I created a simple layout (4 rows & 6 columns) however, there is an unwanted whitespace on the bottom, causing a visible scroll.

Is there a way to fix this without setting the exact height to the .container element? When I set the height to the .container (height: 500px), the problem goes away. Is this the way to go around it? I don't want to use a quick fix that will cause me a problem down the way maybe on smaller or larger viewports.

.grid{
  display: grid;
  position: relative;
  margin: auto;
  grid-template-areas:
    "nav nav nav nav nav nav"
    "logo logo logo logo logo logo"
    "main main main main main side"
    "footer footer footer footer footer footer";

  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 50px 1fr 1fr;
}
.nav{
  grid-area: nav;
  background-color:green;
}
.logo{
  grid-area: logo;
  background-color:salmon;
}
.main{
  grid-area: main;
  background-color:cadetblue;
  min-height: 800px;
  height: auto;
}
.side{
  grid-area: side;
  background-color:lightpink;
  min-height: 800px;
  height: auto;
}
.footer{
  grid-area: footer;
  background-color:sandybrown;
  height: 50px;
}

.overlap{
  background-color: hotpink;
  grid-area: 3/ 3/ 3/ 4;
  z-index: 5;
}

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSSGrid</title>
    
    </head>
  
    <body>
      <div class="grid">

        <nav class="nav"></nav>
        <div class="logo"></div>
        <div class="overlap">
          <h3>Overlap!</h3>
        </div>
        <section class="main"></section>
        <aside class="side"></aside>
        <footer class="footer"></footer>

      </div>
    </body>
    </html>

Cafeteria answered 31/7, 2018 at 15:23 Comment(0)

Since you want 4 rows and one of them to take up as much room as possible (1fr), the final row should either have a fixed height or be set to auto.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.grid {
  display: grid;
  position: relative;
  margin: auto;
  grid-template-areas: "nav nav nav nav nav nav" "logo logo logo logo logo logo" "main main main main main side" "footer footer footer footer footer footer";
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 50px 1fr auto;
}

.nav {
  grid-area: nav;
  background-color: green;
}

.logo {
  grid-area: logo;
  background-color: salmon;
}

.main {
  grid-area: main;
  background-color: cadetblue;
  min-height: 800px;
  height: auto;
}

.side {
  grid-area: side;
  background-color: lightpink;
  min-height: 800px;
  height: auto;
}

.footer {
  grid-area: footer;
  background-color: sandybrown;
  height: 50px;
}

.overlap {
  background-color: hotpink;
  grid-area: 3/ 3/ 3/ 4;
  z-index: 5;
}

<div class="grid">
  <nav class="nav"></nav>
  <div class="logo"></div>
  <div class="overlap">
    <h3>Overlap!</h3>
  </div>
  <section class="main"></section>
  <aside class="side"></aside>
  <footer class="footer"></footer>
</div>

Dariusdarjeeling answered 31/7, 2018 at 16:7 Comment(1)

Thanks for the answer - grid-template-rows: 50px 50px 1fr auto; works. I also noticed that for it to work well I have to set a specific height to the element that is ocupying the last row to:. .footer { grid-area: footer; height: 50px; } – Cafeteria 1/8, 2018 at 7:40

Change grid-template-rows to 50px 50px 1fr. You can also try height: fit-content.

Errantry answered 31/7, 2018 at 15:33 Comment(1)

Thanks for the hint, height: fit-content solves the issue. The first suggestion grid-template-rows :50px 50px 1fr works as well, however, I do have 4 rows so I will skip using 50px 50px 1fr, unless someone can explain why this little hack works? :D – Cafeteria 1/8, 2018 at 7:37

Replace

grid-template-rows: 50px 50px 1fr 1fr;

With

grid-template-rows: 50px 50px 1fr;

You're basically just adding another set of rows underneath your needed ones.

Humectant answered 31/7, 2018 at 15:31 Comment(0)

We can provide grid height 100%, show that the bottom empty space will be removed. And make sure while provide height 100% to grid element, parent should have height in percentage.

* { height: 100%; weight: 100% }
.grid{
  height: 100%;
  display: grid;
  position: relative;
  margin: auto;
  grid-template-areas:
    "nav nav nav nav nav nav"
    "logo logo logo logo logo logo"
    "main main main main main side"
    "footer footer footer footer footer footer";

  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 50px 1fr 1fr;
}
.nav{
  grid-area: nav;
  background-color:green;
}
.logo{
  grid-area: logo;
  background-color:salmon;
}
.main{
  grid-area: main;
  background-color:cadetblue;
  min-height: 800px;
  height: auto;
}
.side{
  grid-area: side;
  background-color:lightpink;
  min-height: 800px;
  height: auto;
}
.footer{
  grid-area: footer;
  background-color:sandybrown;
  height: 50px;
}

.overlap{
  background-color: hotpink;
  grid-area: 3/ 3/ 3/ 4;
  z-index: 5;
}

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSSGrid</title>
    
    </head>
  
    <body>
      <div class="grid">

        <nav class="nav"></nav>
        <div class="logo"></div>
        <div class="overlap">
          <h3>Overlap!</h3>
        </div>
        <section class="main"></section>
        <aside class="side"></aside>
        <footer class="footer"></footer>

      </div>
    </body>
    </html>

Legible answered 28/6, 2022 at 6:26 Comment(0)

Recommended topics

Hot tags