Scaling Grid Item Height with Grid Item Width

Question

I'm making a grid layout that resizes various numbers of items (squares) with the width of the page and wraps items that don't fit on the same line to the next line down.

I've tried lots of approaches like using vw and removing minmax, but nothing seems to get the result that I want. Here's the code currently:

css:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}

.grid-item {
  background-image: url('../mood.jpg'); /*square image*/
  background-repeat: no-repeat;
  background-size: contain;
  align-content: center;
  color: black;
  height: 8rem;
}

html:

<div class="grid-container">
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
    </div>

Right now it has some extra space to the right of the image and I want the height to scale to fit that extra space.

Edit: Here's a pen that more thoroughly shows the problem. The grid items aren't squares, they're rectangles and I want them to be squares.

@TemaniAfif the problem with that one is that the squares don't wrap to the next row when there is not enough space — Retronix, May 05 '19 at 23:42

score 1 · Answer 1 · answered May 05 '19 at 23:52

1

Change height: 8rem to padding: 100%.

answered May 05 '19 at 23:52

Retronix

216
2
13

Scaling Grid Item Height with Grid Item Width

1 Answers1