CSS Grid – Grid template not expanding full height

Issue

I am using CSS-Grid and I’m adding some example content inside the main section, I don’t know why the content inside either the main or sidebar sections are not expanding full height. As you can see in the code snippet.
I have defined the body, HTML, and container with height: 100vh or using 100%.

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

html,
body {
    height: 100vh;
}

.container {
    height: 100vh;
    display: grid;
    grid-template: "header header header" 5rem 
                   "sidebar main main" auto / 8rem auto;
  }
  
  nav {
    grid-area: header;
    grid-column-end: span 3;
    background: green;
  }

  .sidebar {
    height: 100vh;
    grid-area: sidebar;
    background: gold;
  }
  
  main {
    height: 100vh;
    grid-area: main;
    grid-column-end: span 2;
    background: skyblue;
  }
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <nav>navigation bar</nav>
        <div class="sidebar">sidebar</div>
        <main>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
        </main>
    </div>
</body>
</html>

Solution

If you just want fully responsive columns, your code could be simplified this way:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.container * {
  padding: 10px;
}

nav {
  height: 5rem;
  grid-column-start: 1;
  grid-column-end: 4;
  background: green;
}

.sidebar {
  grid-column-start: 1;
  grid-column-end: 2;
  background: gold;
}

main {
  grid-column-start: 2;
  grid-column-end: 4;
  background: skyblue;
}
<div class="container">
  <nav>navigation bar</nav>
  <div class="sidebar">sidebar</div>
  <main>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
  </main>
</div>

Answered By – AbsoluteBeginner

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published