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

css grid empty cell
css grid background image
css grid hide column
css grid fill remaining height
css grid full height
css grid max-width
css grid min-content
css grid header

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.

Here is the code:

https://codepen.io/Denzelzeldi/pen/EpQwME

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

CSS:

.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;
}

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>

Grid template areas, 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  Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered. Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML. Sequences of whitespace will collapse into a single whitespace

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.

CSS Grid - White space on the bottom and how to remove it, Using CSS grid, I'm trying to make a grid of images that have no gap between them, I'm not sure what's going wrong, but there's an empty space under all the  How to remove the extra white space underneath an image using CSS you will see an extra white space (around 3px) at the bottom of How to position text over an

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

Grid has empty space at bottom of rows : css, Oliver has been working with CSS grid layout and has learned quite a bit along the way. This syntax can become somewhat unwieldy if you have a lot of empty space in your design (Too many periods! As usual, position: absolute removes an element from the flow of the document (i.e. it is margin-bottom: 10px; } .grid  The grid-row-gap property defines the size of the gap between the rows in a grid layout. yes. Read about animatable Try it. CSS Grid Layout Module Level 1. JavaScript syntax: object .style.gridRowGap="50px" Try it. Browser Support. The numbers in the table specify the first browser version that fully supports the property. grid-row-gap: length;

Things I've Learned About CSS Grid Layout, Essentially, I want to get rid of the white space to the right. This is a link to h2.​blog-title, .blog-post .blog-header h2.blog-title {padding-bottom:5px !important;} It's used to contain content so it can conform to some sort of grid. If you’re stuck with a mysterious blank space at the bottom of your site, here are 3 steps to fixing it, forever. Reset CSS. Use a CSS reset like the one attached here, or grab yourself the HTML5 Boilerplate, which offers an excellent CSS reset. In many cases, using a reset CSS can solve most of your CSS related problems, it also gives you a solid base to work from, and troubleshoot from.

Getting rid of excess white space, WooCommerce Variations Add-To-Cart Grid · Beanstream Gateway for Gravity If you're stuck with a mysterious blank space at the bottom of your site, here are 3 steps to fixing it, forever. Reset CSS. Use a CSS reset like the one attached here, or grab yourself the HTML5 Removing it solved my problem! See the Pen Boxy Layout with CSS Grid and vmin by CSS GRID on CodePen. Absolute positioning. When you absolutely position a grid item, rather than its positioning context being its container (i.e. the entire grid) we can position it in relation to its specified grid-column and grid-row start and end lines.

Fixing a blank white space at the bottom of your website, Ever wondered how achieve styling of empty grid cells without adding of generated content to the top and one to the bottom of the container, If we removed the grid-row-gap and used padding to make the space, it still  Play it. grid-row-gap. Sets the size of the gap between the rows in a grid layout. 0 is the default value. grid-column-gap. Sets the size of the gap between the columns in a grid layout.

Comments
  • 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; }
  • 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