2

I'm trying to achieve a grid layout to match this wireframe:

wireframe

So far I've got the following markup:

<div class="grid">
  <div class="spanWidth">
    <img src="https://loremflickr.com/290/130?random=1" />
  </div>
  <div>
    <img src="https://loremflickr.com/140/130?random=2" />
  </div>
  <div>
    <img src="https://loremflickr.com/140/180?random=3" />
  </div>
  <div>
    <img src="https://loremflickr.com/140/130?random=4" />
  </div>
  <div>
    <img src="https://loremflickr.com/140/130?random=5" />
  </div>
  <div>
    <img src="https://loremflickr.com/140/180?random=6" />
  </div>
  <div>
    <img src="https://loremflickr.com/140/130?random=7" />
  </div>
</div>

with CSS:

.grid {
  display: grid;
  grid-gap: 10px;
}

.spanWidth {
  grid-column: 1 / span 2;
}

The problem I'm running into is that the irregularly-sized images don't conform to a 'row' layout. They take up 1.25 rows. Which means I end up with gaps in the grid:

grid with gaps

Is there anything I can do here to match the wireframe?

Dave Irvine
  • 384
  • 4
  • 14
  • Might help: https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb – Pete Apr 30 '19 at 13:18
  • you need to allow some of div to span a few rows, then a bit of clipping via object-fit could finalyze . https://codepen.io/gc-nomade/pen/EJzXZY spanning requires to know which is suppose to , if you don't , then the masonry javascript will do the job, css cannot guess which is to span :( The codepen linked could be the answer if the image are always in this order with these average sizing/ratio). – G-Cyrillus Apr 30 '19 at 14:26

1 Answers1

-1

You can set a width and height of 100%, and then readjust the aspect-ratio with object-fit: cover, like this:

.grid > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

See: https://jsfiddle.net/s2yqfgjh/

elveti
  • 2,316
  • 4
  • 20
  • 27