align images with css next to eachother on predifined pattern

Question

I have the following layout of images where the images is aligned side by side.

CSS

      <style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 4px;
}


.row::after {
  content: "";
  clear: both;
  display: table;
}
.res-img {
   width:100%;
  height: auto;
  border-style:solid;
  border-color:gray;
}

  </style>

But I would like it to be displayed like the image below and preferably responsive meaning the images stack on each other on small screens. Can someone show me how this can be achieved?

HTML

<div class="row">
  <div class="column">
    <img src="img.jpg" alt="" class="res-img">
  </div>
  <div class="column">
    <img src="img.jpg" alt="" class="res-img">
  </div>
  <div class="column">
    <img src="img.jpg" alt="" class="res-img">
  </div>
</div>

Your HTML does not correspond to your picture (3 versus 5 imgs). And are there going to be just 5 imgs or is a more general solution needed? Look into CSS grid. — A Haworth, Jun 01 '22 at 07:00

Sigurd Mazanti · Accepted Answer · 2022-06-01T07:25:39.533

Make a wrapper-element and use grid-template-rows: 1fr 1fr and grid-template-columns: 1fr 1fr 1fr, which is a 3-column and 2-row layout. Optionally you could just set their value to auto, as you are already using span in the grid to make the layout (read further for clarification).

.wrapper {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

Make sure each img is wrapped into a container for better layout control. Not necessary, but preferable in my opinion. Add flex to the img-container, and then apply object-fit: cover, so the image won't stretch. This will lead to a bit of cropping of the image, but it won't be stretched out - also preferable in my opinion, but not necessary.

Also, make sure to apply max-width: 100% and height: auto on the img-element, so the image is automatically responsive and doesn't overflow from the container.

.item {
  border: 1px solid black;
  display: flex;
}

.item img {
  object-fit: cover;
  max-width: 100%;
  height: auto;
}

For the element that needs a height of 2 rows, you can use grid-span. To set the element as the last column (column 3), use grid-column: 3/3. Use grid-row: 1 / span 2 to make the item go into row 1 of the layout and span out to the second row.

.item.large {
  grid-column: 3 / 3;
  grid-row: 1 / span 2;
}

To make the whole thing responsive, just modify the values on the .item.large-element to auto, while setting your preferred amount of columns and rows inside a media-query:

@media only screen and (max-width: 768px) {
  .wrapper {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
  .item.large {
    grid-column: auto;
    grid-row: auto;
  }
}

.wrapper {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.item {
  border: 1px solid black;
  display: flex;
}

.item img {
  object-fit: cover;
  max-width: 100%;
  height: auto;
}

.item.large {
  grid-column: 3 / 3;
  grid-row: 1 / span 2;
}

@media only screen and (max-width: 768px) {
  .wrapper {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
  .item.large {
    grid-column: auto;
    grid-row: auto;
  }
  .item img {
    width: 100%;
  }
}

<div class="wrapper">
  <div class="item"><img src="https://www.fillmurray.com/640/360"></div>
  <div class="item"><img src="https://www.fillmurray.com/640/360"></div>
  <div class="item large"><img src="https://www.fillmurray.com/640/360"></div>
  <div class="item"><img src="https://www.fillmurray.com/640/360"></div>
  <div class="item"><img src="https://www.fillmurray.com/640/360"></div>
</div>

score 0 · Answer 2 · answered Jun 01 '22 at 07:13

You can use CSS grid layout: check this for CSS grid layout: https://cssgrid-generator.netlify.app/

.row {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
height:200px;
}
.div1 { grid-area: 1 / 1 / 2 / 2;}
.div2 { grid-area: 1 / 2 / 2 / 3;}
.div3 { grid-area: 2 / 1 / 3 / 2;}
.div4 { grid-area: 2 / 2 / 3 / 3;}
.div5 { grid-area: 1 / 3 / 3 / 4;}
.col{
  height:100%; width:100%;
  border:1px solid #000;
}

<div class="row">
<div class="div1 col">img1 </div>
<div class="div2 col">img2 </div>
<div class="div3 col">img3 </div>
<div class="div4 col">img4 </div>
<div class="div5 col">img5 </div>
</div>

align images with css next to eachother on predifined pattern

2 Answers2