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

user_14251101 0
Viewed 4387

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>

grid css html
2 Answers

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

user_5148780 

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

user_142454920
Related