CSS Grid is larger than it's container div in height

Question

I am trying to make a grid but the grid always overflows the div it's inside. It's so simple I don't understand what the issue is. The column div has a background color so you can see where it is but you can also see it in the element inspector.

I have tried several solutions and looked online but I can't find a solution. Here's what I tried and why it didn't work:

height:100% on grid or column class added two empty grid cells on the bottom
overflow:auto on the column class made a scroll bar
creating a <br> with clear:both at the bottom didn't do anything

.column {
  margin-top: 3%;
  margin-left: 20%;
  margin-right: 20%;
  background-color: rgba(200, 0, 0, 0.1);
}

.grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(450px, 1fr));
  grid-auto-rows: (0px, 1fr);
  grid-gap: 2%;
}

.plum {
  /* background-color: plum; */
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.1);
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
}

.container p {
  word-wrap: break-word;
}

.centered {
  text-align: center;
}

<body class="plum">
  <br>
  <div class="column">
    <div class=" grid">
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: I like memes</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: I like memes again</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: this is a post</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: This is the first post from the website</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: I have added this</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: joe</p>
          <p>Text: I'm joe</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: joe</p>
          <p>Text: Okay</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: joe</p>
          <p>Text: I like memes too</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: Caps test</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: OKAYYYYYYYYYYYYYYYYYYYYYYYY</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: sssssssssssssssssss</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: SSSSSSSSSSSSSSSSSS</p>
        </div>
      </div>
    </div>
  </div>
  <p class="centered"><a href="submitform.php">Add new</a></p>

You are setting the min width of the grid to 450px here: `grid-template-columns: repeat( auto-fit, minmax(450px, 1fr));` — FluffyKitten, Sep 10 '20 at 00:10
@FluffyKitten the width is perfect, the height is what I have a problem with. I have tried to do various things with grid-template-rows which haven't worked. — oddwhirled, Sep 10 '20 at 00:25
It might be height you're asking about, but your grid doesn't fit in your container width-ways either - its the very first thing you see when you run your code in a snippet so I wouldn't call it perfect! — FluffyKitten, Sep 10 '20 at 00:32
@FluffyKitten: it might be worth using the 'Full page' link in the result panel of the Snippet; while it may depend on the screen size of the device you're using (and it's clearly not (yet?) a responsive design), it becomes clear what OP means by "*the width is perfect.*" — David Thomas, Sep 10 '20 at 00:39
@DavidsaysreinstateMonica Yes, I saw it in full screen, but there is clearly more than one issue so it might be a bigger problem than the OP is focusing on. — FluffyKitten, Sep 10 '20 at 00:41

FluffyKitten · Accepted Answer · 2020-09-10T01:09:58.873

This is being caused by the grid-gap. You're using grid-gap: 2%; which applies a % gap between both columns and rows. This works perfectly for the grid itself as we can see, and the grid is including the 2% gap between rows in it's total height.

However using percentages for height is problematic when the container doesn't have a defined height. What's happening here is that the container isn't recognising the % gap height and is not including it in it's total height.

You can easily fix it by using a defined value for height, e.g.

grid-column-gap: 2%;    // you can still use % for the column gap
grid-row-gap: 20px;     // fixed height for row gap

Working Example:

.column {
  margin-top: 3%;
  margin-left: 20%;
  margin-right: 20%;
  background-color: rgba(200, 0, 0, 0.1);
}

.grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(300px, 1fr));
  grid-auto-rows: (0px, 1fr);
  grid-column-gap: 2%;
  grid-row-gap: 20px;
}

.plum {
  /* background-color: plum; */
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.1);
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
}

.container p {
  word-wrap: break-word;
}

.centered {
  text-align: center;
}

<body class="plum">
  <br>
  <div class="column">
    <div class=" grid">
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: I like memes</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: I like memes again</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: this is a post</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: This is the first post from the website</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: I have added this</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: joe</p>
          <p>Text: I'm joe</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: joe</p>
          <p>Text: Okay</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: joe</p>
          <p>Text: I like memes too</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: Caps test</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: OKAYYYYYYYYYYYYYYYYYYYYYYYY</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: sssssssssssssssssss</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: SSSSSSSSSSSSSSSSSS</p>
        </div>
      </div>
    </div>
  </div>
  <p class="centered"><a href="submitform.php">Add new</a></p>

Width:

Using % for column gaps can also cause problems sometimes, if the columns are defined using % ad the gaps are not taken into account.

However you have the columns set up correctly so that isn't the cause of the grid extending out of the container on smaller screens here. That is being caused by setting the minimum grid with to 450px here:

grid-template-columns: repeat( auto-fit, minmax(450px, 1fr));

A value of around 300px might be more appropriate as it will fit on the vast majority of mobile screens (320px is usually considered to be the smallest width to accommodate but don't forget about margins outside the elements too).

Thank you. Looks like it finally works. I was under the impression that percentage was always calculated from the width of the parent container even if it was a height value? — oddwhirled, Sep 10 '20 at 03:36
@oddwhirled not usually no, but height percentages get complicated :) Take a look at the link I included, if might explain it. Glad to help anyway! If this works for you, you could consider accepting it so the question is marked as resolved on SO. See [What should I do when someone answers my question?](https://stackoverflow.com/help/someone-answers) Plus you get a few rep points :) — FluffyKitten, Sep 10 '20 at 03:52
greatly appreciated! I also noticed someone seemed to edit my post to make it more streamlined and remove unnecessary emotional comments lol so now I know how to make a better post — oddwhirled, Sep 10 '20 at 04:10
@oddwhirled That was me too :) I also put the code into a runnable snippet using the `[<>]` button on the editor toolbar You can see all edits using the link that says (e.g.) [edited 3 hours ago](https://stackoverflow.com/posts/63821011/revisions) at the bottom of the question. Stack Overflow is a Q&A site so questions and answers are supposed to be "encyclopedia-like" to help other users in future. You can browse the [help section for asking](https://stackoverflow.com/help/asking) for more info. :) — FluffyKitten, Sep 10 '20 at 04:20

score 2 · Answer 2 · answered Sep 10 '20 at 04:55

.column {
  margin-top: 3%;
  margin-left: 20%;
  
  background-color: rgba(200, 0, 0, 0.1);
}

.grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(450px, 1fr));
  grid-auto-rows: (0px, 1fr);
  grid-gap: 2%;
}

.plum {
  /* background-color: plum; */
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.1);
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
}

.container p {
  word-wrap: break-word;
}

.centered {
  text-align: center;
}

<body class="plum">
  <br>
  <div class="column">
    <div class=" grid">
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: I like memes</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: I like memes again</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: this is a post</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: This is the first post from the website</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: I have added this</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: joe</p>
          <p>Text: I'm joe</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: joe</p>
          <p>Text: Okay</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: joe</p>
          <p>Text: I like memes too</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: Caps test</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: OKAYYYYYYYYYYYYYYYYYYYYYYYY</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: sssssssssssssssssss</p>
        </div>
      </div>
      <div class="card">
        <div class="container">
          <p>Poster: tester</p>
          <p>Text: SSSSSSSSSSSSSSSSSS</p>
        </div>
      </div>
    </div>
  </div>
  <p class="centered"><a href="submitform.php">Add new</a></p>

remove margin-right from (.column) class.

CSS Grid is larger than it's container div in height

2 Answers2

Linked