How to arrange images in ‘Google Keep images’ layout?

  css, css-grid, flexbox, javascript, layout

Google Keep Images Screenshot

Arrange dynamic image content as in the image. Each row will have dynamic height based on image dimensions. And images inside the row should have the full height of the row. Last row shouldn’t be staggered. All rows and the contents inside should be uniformly arranged. If CSS only solution is not possible, how to achieve this layout with Javascript?

The most close layout I could achieve was with a fixed height for each row.

Markup:

{images?.map((imageSrc, imageIndex) => {
return (

);
})}

Style:

ul.images-container {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    height: 20vh;
    flex-grow: 1;
    img {
      max-height: 100%;
      min-width: 100%;
      object-fit: cover;
      vertical-align: bottom;
    }
  }
}

Output Layout

Source: Ask Javascript Questions

LEAVE A COMMENT