How to Dynamically Create a Collage (Grid with No Gaps) of Images, Where Images Have Different Heights

How do I dynamically create a collage (grid with no gaps) of images, where images have different heights?

If you want to do this in css only you have to create divs for every column, and float those columns (but it messes up order of images).

Alternatively, you can use jquery plugin like this one.

Controlling the size of an image within a CSS Grid layout

You have two different problems here.

I'll address the first one, which is to contain the image in its container. You almost had it.

Your code:

.photo > img {
  object-fit: cover;
  width: 100%;
}

You just needed to specify a maximum height on the image so it could not overflow the container:

.photo > img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

JSFiddle demo

---

The second problem, which is to scale the size of the image container, and drag up the grid items below when the image gets smaller, is significantly more complex.

This isn't an issue relating to the image. In fact, you can remove the image altogether when trying to solve this problem.

This is an issue of dynamically sizing a grid item (the image container). Why would this grid item change size in relation to the image size, when its size is being controlled by grid-template-columns and grid-template-rows?

In addition, why would the bottom row of grid items (tag, album, rotate) follow the image container either up or down? They would have to exit their row.

Scaling the entire grid container wouldn't be a problem. But it seems like you only want to scale one grid item (the image container). It's tricky. You're probably looking at additional containers, auto values for lengths, and possibly scripting.

Here's what happens if you give the image rows an auto value: JSFiddle demo

display dynamic cards with different heights using grid css without gutter

You need something like this?
https://codepen.io/hisbvdis/pen/XWrYqqO

* {  box-sizing: border-box;}
.wrapper {  border: 2px solid #f76707;  border-radius: 5px;  background-color: #fff4e6;}
.wrapper>div {  border: 2px solid #ffa94d;  border-radius: 5px;  background-color: #ffd8a8;  padding: 1em;  color: #d9480f;}
.wrapper {  display: grid;  grid-gap: 10px;  grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));  grid-auto-rows: 50px;  grid-gap: 10px;}
.col-1 {  grid-column-start: 1;}
.big {  grid-row: span 2;}

<div class="wrapper">  <div class="col-1" id="foo-1">One</div>  <div id="foo-2">Two</div>  <div class="col-1" id="foo-3">Three</div>  <div class="big" id="foo-4">Four</div>  <div class="col-1" id="foo-5">Five</div></div>

How to dynamically scale images while keeping the same spacing between images in CSS?

In order to get that spacing between each column, the cleanest way would be to use grid. The grid gap is what controls the spacing between each column. I added a media query to show the responsive outcome.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2rem; /* Adjust the grid gap to adjust the spacing between the columns */
}

.foodPicture a {
    text-decoration : none;
}

.caption {
    display: block;
    text-align: center;
    padding: 1rem 0;
    font-weight: bold;
    font-family: sans-serif;
    color: black;
    font-size: 20px;
}

.img-container img {
    width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}

/* screens smaller than 768px, the grid items will be stacked */
@media screen and (max-width: 768px) {

    .container {
        grid-template-columns: 1fr;
    }

}

<section class="mainContent">

        <div class="container">
      
          <div class="foodPicture">
            <a href="./recipes/lasagna.html">
                <div class="img-container">
                    <img class="mainPictures" src="https://fakeimg.pl/500x300">  
                  </div>
              <span class="caption">Lasagna</span>
            </a>
          </div>

          <div class="foodPicture">
            <a href="./recipes/lasagna.html">
                <div class="img-container">
                  <img class="mainPictures" src="https://fakeimg.pl/500x300">  
                </div>
              <span class="caption">Lasagna</span>
            </a>
          </div>

          <div class="foodPicture">
            <a href="./recipes/lasagna.html">
                <div class="img-container">
                    <img class="mainPictures" src="https://fakeimg.pl/500x300">  
                  </div>
              <span class="caption">Lasagna</span>
            </a>
          </div>
    </section>

Image grid fixed aspect ratio with dynamic size

You will need at least an extra container and apply the padding trick.

.grid div {
  padding-top:100%;
}

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="p-4">
  <div class="grid gap-4 sm:gap-8 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
    <div class="relative"><img src="https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg" class="w-full h-full  absolute inset-0 object-cover"></div>
    <div class="relative"><img src="https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg" class="w-full h-full  absolute inset-0 object-cover"></div>
    <div class="relative "><img src="https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg" class="w-full h-full  absolute inset-0 object-cover"></div>
    <div class="relative"><img src="https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg" class="w-full h-full  absolute inset-0 object-cover"></div>
    <div class="relative"><img src="https://images.unsplash.com/photo-1612476464716-431a2751e006" class="w-full h-full  absolute inset-0 object-cover"></div>
  </div>
</div>

Mosaic Grid gallery with dynamic sized images

I suggest Freewall. It is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layouts, images layouts, nested grid layouts, metro style layouts, pinterest like layouts ... with nice CSS3 animation effects and call back events. Freewall is all-in-one solution for creating dynamic grid layouts for desktop, mobile, and tablet.

Images not adjusting inside the grid

The solution that worked for me:

• I used grid-auto-rows to create 2 rows with specific height.
• Then added span to adjust the column accordingly to cover both rows.

.grid {
  width: 100%;
  border: 1px solid red;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 280px 280px;
}

.col1 {
  height: 100%;
  grid-column: 1/8;
  grid-row: span 2;
  background: red;
}

.col2 {
  grid-column: 8/13;
  height: 100%;
  background: orange;
}

.col2 img:first-child {
  margin-bottom: 11px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .grid {
    grid-auto-rows: 220px 120px;
  }
  
  .col1 {
    grid-column: 1/13;
  }

  .col2 {
    grid-column: 1/13;
    grid-row: span 2;
  }
}

<div class="grid">
  <div class="col1">
    <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8N3x8fGVufDB8fHx8&w=1000&q=80" alt="property"/>
  </div>
  <div class="col2">
    <img src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YmVhdXRpZnVsJTIwaG91c2V8ZW58MHx8MHx8&w=1000&q=80" alt="property"/>
    <img src="https://images.pexels.com/photos/186077/pexels-photo-186077.jpeg?cs=srgb&dl=pexels-binyamin-mellish-186077.jpg&fm=jpg" alt="property" />
  </div>
</div>

Any jQuery plugin something like google+ image collage

jQuery/CSS3 photo gallery tutorials

---

Related Topics