auto-fill taking too much space

Question

When using auto-fill, the div's height gets stretched to take as much space as it needs for the smallest element.

Example: on phone -> div has biggest height in pixels as it is compensating for having less width on computer -> div still takes the same height as if it was on phone

on PC:

on Phone:

btw the div's height is set to auto and the red is the background of the div

the code:

.div {
  margin-top: 30px;
  width: 90%;
  height: auto;
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
  grid-template-rows: 250px 250px 250px 250px;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  background: red;
}

.element {
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: solid 4px #566681;
}

Please tell me how I can fix this.

Answer 1

what exactly do you want in this layout?

• what I understood from your question is that you want to fill the whole ".div" container with ".element" items right?
• for increasing the height of .elements on the desktop, you can use grid-auto-rows
• and make the height of ".div" container 100% to auto-adjust based on the content inside it.

.div {
  margin-top: 30px;
  width: 90%;
  height: 100%;
  display: grid;
  grid-auto-rows: 250px;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  background: red;
}