Why are grid items overflowing the grid container?

Question

I want my grid container to auto-adjust to the content it has. It's parent also has a height of auto. At this time, the grid is being overflowed by its content. It has this behavior:

xxxxxxxxxxcontainerxxxxxxxxxx   _
|         |        |        |    |
|         |        |        |    |
|_________|________|________|    |
|         |        |        |    |
|         |        |        |    |
|_________|________|________|    |---------Grid items
|         |        |        |    |
|         |        |        |    |
|_________|________|________|    |
|xxxxxxxxx|xxxxxxxx|xxxxxxxx|    | 
|         |        |        |    |
|_________|________|________|   _|

I've tried to use the grid-template-columns, but it was only affecting the first row, so tried using grid-auto-columns and it resizes all the rows, but still overflowing.

I expect that if I add another row, the grid container will be resized to its content.

#allyes {
  position: relative;
  width: 100%;
  height: auto;
  background-image: url('../img/fondo-laptop.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#allyes #allyesLogos {
  height: auto;
  margin-left: auto;
  width: 60%;
  padding: 2% 3%;
  background: rgba(255, 255, 255, 0.6);
}

#allyes #allyesTitle {
  font-size: var(--bigTitleSize);
  font-family: var(--titleFamily);
  color: white;
  text-transform: uppercase;
  margin-bottom: 5vh;
  text-shadow: 2px 2px rgba(0, 0, 0, 0.6);
}

#allyesLogos .logosTable {
  width: 100%;
  height: auto;
  display: grid;
  margin-bottom: 5vh;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: 70px;
  align-items: center;
  justify-items: center;
  grid-gap: 2% 3%;
}


  
    alianzas comericales

Michael Benjamin · Accepted Answer

This is the source of the problem:

grid-gap: 2% 3%

It appears that the percentage grid gaps are being factored into the layout after the rendering engine has set the dimensions of the container.

It may also be an issue with what the percentages are being based on (container height? row height? something else?).

Either way, percentage values for grid gaps are causing grid items to overflow the grid container.

Try using a different unit of length, such as vh, px or em. They seem to work fine.

In the demo below, I used grid-gap: 2vh 3vh.

#allyes {
  position: relative;
  width: 100%;
  height: auto;
  background-image: url('../img/fondo-laptop.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#allyes #allyesLogos {
  height: auto;
  margin-left: auto;
  width: 60%;
  padding: 2% 3%;
  background: rgba(255, 255, 255, 0.6);
}

#allyes #allyesTitle {
  font-size: var(--bigTitleSize);
  font-family: var(--titleFamily);
  color: white;
  text-transform: uppercase;
  margin-bottom: 5vh;
  text-shadow: 2px 2px rgba(0, 0, 0, 0.6);
}

#allyesLogos .logosTable {
  width: 100%;
  height: auto;
  display: grid;
  margin-bottom: 5vh;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: 70px;
  align-items: center;
  justify-items: center;
  /* grid-gap: 2% 3%; */
    grid-gap: 2vh 3vh; /* adjustment */
  border: 1px solid red; /* demo */
}


  
    alianzas comericales

Also note: The problem described in the question exists in Chrome and Firefox, but not in Edge. The grid container in Edge expands naturally to accommodate grid items along with percentage grid gaps.

Why are grid items overflowing the grid container?

Answers (1)

Related Questions