1

I have been experimenting a bit with CSS Grid and trying to develop a simple webpage. I am using the fr unit to evenly create display my content and make it responsive. The columns are evenly created to fill up the space of the screen. But the rows on the other hand are not filling up the space. They are being created but not to fill up the whole height of the screen.

Here is my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="style.css" type="text/css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
  <title>Name of Site</title>
</head>
<body>
  <div class="container">
    <header class="header box">
      <h1>Name</h1>
    </header>
    <nav class="info box">
      <h2>General Information</h2>
    </nav>
    <div class="right box">
      <h3>Right</h3>
    </div>
    <footer class="footer box">
      <h2>Footer</h2>
    </footer>
  </div>
</body>
</html>

Here is my CSS Code:

/* Resets */

  body {
  margin: 0;
}

/* Typography */

h1, h2, h3 {
  font-family: 'Roboto';
  text-align: center;
  font-variant-caps: all-petite-caps;
}

ul, li, p {
  font-family: 'Roboto';
}

.box {
  color: #ffffff;
  padding: 10px 10px;
}

/* CSS Grid */
@media (min-width: 960px) {
  .container {
    display: grid;
    grid-template-areas:
      "h r"
      "i r"
      "f r"; 
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 3fr 1fr;
  }
}

.header {
  grid-area: h;
  background-color: #57B8BF;
}

.info {
  grid-area: i;
  background-color: #3A7B7F;
}

.footer {
  grid-area: f;
  background-color: #1D3D40;
  color: #ffffff;
}

.right {
  grid-area: r;
  background-color: #ffffff;
  color: black;
}

The result I keep getting is this:

CSS Grid Result.

I have the Firefox Grid display so you can see how the grid is laid out. But i the image I have written in red the space that is now being included when making a the rows. Isn't the footer suppose to be at the end within its column?

How do I get the rows to evenly distribute the height of the page jsut like it is being done with the columns?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
jdruiz
  • 23
  • 5

2 Answers2

0

I had the same issue, use this: 

.container {
  width: 100%;
  height: 100vh;
}
Vadim Ovchinnikov
  • 13,327
  • 5
  • 62
  • 90
  • Hey thanks! This worked. Do you know what this has to be done? – jdruiz Dec 10 '17 at 00:38
  • I'm not 100% sure, however, I think its due to the fact that the grid size is dependent on the content inside, so if there's more content, there's more space, if there's less content, there's less space. Since there is barely any content inside of your div classes/grid boxes. There is white space. By making the height 100vh, you make sure the div class .container expands to match the body. If this helped, use this as the accepted answer. –  Dec 10 '17 at 00:44
0

Just adjust your container and html, body to 100% height

html, body {
  height: 100%;
}

.container {
  height: 100%;
}


html, body {
  height: 100%;
}

body {
  margin: 0;
}

/* Typography */

h1, h2, h3 {
  font-family: 'Roboto';
  text-align: center;
  font-variant-caps: all-petite-caps;
}

ul, li, p {
  font-family: 'Roboto';
}

.box {
  color: #ffffff;
  padding: 10px 10px;
}

/* CSS Grid */
@media (min-width: 960px) {
  .container {
    height: 100%;
    display: grid;
    grid-template-areas:
      "h r"
      "i r"
      "f r"; 
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 3fr 1fr;
  }
}

.header {
  grid-area: h;
  background-color: #57B8BF;
}

.info {
  grid-area: i;
  background-color: #3A7B7F;
}

.footer {
  grid-area: f;
  background-color: #1D3D40;
  color: #ffffff;
}

.right {
  grid-area: r;
  background-color: #ffffff;
  color: black;
}
<div class="container">
    <header class="header box">
      <h1>Name</h1>
    </header>
    <nav class="info box">
      <h2>General Information</h2>
    </nav>
    <div class="right box">
      <h3>Right</h3>
    </div>
    <footer class="footer box">
      <h2>Footer</h2>
    </footer>
  </div>
Nandu Kalidindi
  • 6,075
  • 1
  • 23
  • 36
  • There will be a lot of scenarios on how the height of the elements are determined. Most of the time it depends on the parent elements. If you want to get into depth may be this will help you more https://stackoverflow.com/questions/4342092/css-how-is-height-of-block-elements-calculated. I will try to compose a consolidated explanation as well. – Nandu Kalidindi Dec 10 '17 at 01:03