Is it possible to adjust the heights of each individual item of a row in grid?

Question

I am trying to make a gallery that is uneven and staggered by using images and colored divs that are not the same size. I have the columns set to a min of 352px and to auto-fit the screen. So the container with grid looks something like this:

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(352px, 1fr));
    grid-gap: 20px;

The issue I am having is the tallest picture sets the height of the row and the divs that have the smaller images follow the same height. Is there a way to tell the items in the row to not all be the same size? Or rather just target certain items in each row and tell them to be a specific height?

.grey {
    background: #D9D9D9;
  }
  
.tan {
    background: #DCCEC8;
}

.light-brown {
    background: #DC997D;
}

.brown {
    background: #814A3D;
}

.black {
    background: #000;
}

.grid { 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(352px, 1fr));
    grid-gap: 20px;
}

.grid > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

img {
  max-width: 350px;
  width: 350px;
}

.overlay {
    position: absolute;
    width: 350px;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
}

h4 {
  text-transform: uppercase;
  font-size: 26px;
  color: #fff;
  position: absolute;
  z-index: 9;
            }

h4:nth-child(2) {
  bottom: 35px;
}

h4:nth-child(3) {
  font-size: 18px;
  margin: 5px 0;
  bottom: 5px;
} 

.fill {
    max-width: 350px;
    height: 100%;
    width: 100%;
}

<div class='grid'>
    <div>
        <img class="thumbnail" src="https://picsum.photos/500/600" alt="person" />
        <h4>Person One</h4>
        <h4>@person1</h4>
        <div class="overlay"></div>
    </div>
    <div><div class="tan fill"></div></div>
    <div>
        <img class="thumbnail" src="https://picsum.photos/300/220" alt="person" />
        <h4>Person TWO</h4>
        <h4>@person2</h4>
        <div class="overlay"></div>
    </div>
    <div><div class="black fill"></div></div>

    <div>
        <img class="thumbnail" src="https://picsum.photos/700/700" alt="person" />
        <h4>Person 3</h4>
        <h4>@person3</h4>
        <div class="overlay"></div>
    </div>
    <div>
        <img class="thumbnail" src="https://picsum.photos/400/400" alt="person" />
        <h4>Person four</h4>
        <h4>@person4</h4>
        <div class="overlay"></div>
    </div>
    <div>
        <img class="thumbnail" src="https://picsum.photos/500/260" alt="person" />
        <h4>Person Five</h4>
        <h4>@pesron5</h4>
        <div class="overlay"></div>
    </div>
    <div><div class="light-brown fill"></div></div>

    <div><div class='brown fill'></div></div>
    <div>
        <img class="thumbnail" src="https://picsum.photos/600/220" alt="person" />
        <h4>Person Six</h4>
        <h4>@person6</h4>
        <div class="overlay"></div>
    </div>
    <div><div class="black fill"></div></div>
    <div>
        <img class="thumbnail" src="https://picsum.photos/200/350" alt="person" />
        <h4>Person Seven</h4>
        <h4>@person7</h4>
        <div class="overlay"></div>
    </div>

    <div>
        <img class="thumbnail" src="https://picsum.photos/500/300" alt="person" />
        <h4>Person Eight</h4>
        <h4>@person8</h4>
        <div class="overlay"></div>
    </div>
    <div><div class="tan fill"></div></div>
    <div>
        <img class="thumbnail" src="https://picsum.photos/250/250" alt="person" />
        <h4>Person Nine</h4>
        <h4>@Person9</h4>
        <div class="overlay"></div>
    </div>
    <div>
        <img class="thumbnail" src="https://picsum.photos/300/220" alt="person" />
        <h4>Person Ten</h4>
        <h4>@person10</h4>
        <div class="overlay"></div>
    </div>
</div>

You need something like this https://www.jqueryscript.net/demo/Minimal-jQuery-Grid-Layout-with-Endless-Scrolling-Support-RowGrid-js/ — Grumpy, Jul 08 '21 at 07:24
Yeah, something similar to that. Is it not possible to do that with just css? — lachnroll, Jul 08 '21 at 07:40

score 1 · Answer 1 · answered Jul 08 '21 at 07:51

Use height on the grid items. Moreover, the headings should be wrapped in a container and their default margins should be overwritten so that headings fit in container with image's height < 150px.

.grey {
  background: #d9d9d9;
}

.tan {
  background: #dccec8;
}

.light-brown {
  background: #dc997d;
}

.brown {
  background: #814a3d;
}

.black {
  background: #000;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(352px, 1fr));
  grid-gap: 20px;
}

.grid>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

img {
  max-width: 350px;
  width: 350px;
}

.overlay {
  position: absolute;
  width: 350px;
  height: fit-content;
  background: rgba(0, 0, 0, 0.05);
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

h4 {
  text-transform: uppercase;
  font-size: 26px;
  color: #fff;
  z-index: 9;
  text-align: center;
  margin: 0;
  margin-bottom: 10px;
}

.fill {
  max-width: 350px;
  height: 100%;
  width: 100%;
}

.grid-item {
  height: fit-content;
  height: -moz-fit-content;
}

<div class="grid">
  <div class="grid-item">
    <img class="thumbnail" src="https://picsum.photos/500/1000" alt="person" />
    <div class="overlay">
      <h4>Person One</h4>
      <h4>@person1</h4>
    </div>
  </div>
  <div>
    <div class="tan fill"></div>
  </div>
  <div class="grid-item">
    <img class="thumbnail" src="https://picsum.photos/1500/2000" alt="person" />
    <div class="overlay">
      <h4>Person TWO</h4>
      <h4>@person2</h4>
    </div>
  </div>
  <div>
    <div class="black fill"></div>
  </div>
  <div class="grid-item">
    <img class="thumbnail" src="https://picsum.photos/700/1500" alt="person" />
    <div class="overlay">
      <h4>Person 3</h4>
      <h4>@person3</h4>
    </div>
  </div>
  <div class="grid-item">
    <img class="thumbnail" src="https://picsum.photos/400/100" alt="person" />
    <div class="overlay">
      <h4>Person four</h4>
      <h4>@person4</h4>
    </div>
  </div>
  <div class="grid-item">
    <img class="thumbnail" src="https://picsum.photos/500/200" alt="person" />
    <div class="overlay">
      <h4>Person Five</h4>
      <h4>@pesron5</h4>
    </div>
  </div>
  <div>
    <div class="light-brown fill"></div>
  </div>

  <div>
    <div class="brown fill"></div>
  </div>
  <div class="grid-item">
    <img class="thumbnail" src="https://picsum.photos/600/220" alt="person" />
    <div class="overlay">
      <h4>Person Six</h4>
      <h4>@person6</h4>
    </div>
  </div>
  <div>
    <div class="black fill"></div>
  </div>
  <div class="grid-item">
    <img class="thumbnail" src="https://picsum.photos/200/150" alt="person" />
    <div class="overlay">
      <h4>Person Seven</h4>
      <h4>@person7</h4>
    </div>
  </div>

  <div class="grid-item">
    <img class="thumbnail" src="https://picsum.photos/500/300" alt="person" />
    <div class="overlay">
      <h4>Person Eight</h4>
      <h4>@person8</h4>
    </div>
  </div>
  <div>
    <div class="tan fill"></div>
  </div>
  <div class="grid-item">
    <img class="thumbnail" src="https://picsum.photos/250/250" alt="person" />
    <div class="overlay">
      <h4>Person Nine</h4>
      <h4>@Person9</h4>
    </div>
  </div>
  <div class="grid-item">
    <img class="thumbnail" src="https://picsum.photos/300/220" alt="person" />
    <div class="overlay">
      <h4>Person Ten</h4>
      <h4>@person10</h4>
    </div>
  </div>
</div>

Is there a way to adjust the row height so the container is only as tall as the image? I'm trying to adjust the colored divs to make them different sizes as well. Basically, the rows would not be straight horizontal lines. The items below would fall directly below the item above. — lachnroll, Jul 08 '21 at 07:56

Is it possible to adjust the heights of each individual item of a row in grid?

1 Answers1