Simple CSS Image Grid

Sometimes I’m asked how it is possible with Gridzy.js to make an image grid where all images have exactly the same size. Well, it’s possible with Gridzy.js but actually you can do this without Gridzy.js as well. So let’s do this today.

---

First we need the HTML. For this we use a <div> tag with the class myGallery. Within the div we place the images. In the following example code, there are 10 images and then five images with captions.

<div class="myGallery">
  <img src="https://picsum.photos/190/190?1" />
  <img src="https://picsum.photos/190/190?2" />
  <img src="https://picsum.photos/190/190?3" />
  <img src="https://picsum.photos/190/190?4" />
  <img src="https://picsum.photos/190/190?5" />
  <img src="https://picsum.photos/190/190?6" />
  <img src="https://picsum.photos/190/190?7" />
  <img src="https://picsum.photos/190/190?8" />
  <img src="https://picsum.photos/190/190?9" />
  <img src="https://picsum.photos/190/190?10" />
  <div class="item">
    <img src="https://picsum.photos/190/190?11" />
    <span class="caption">This is an image caption for image 11</span>
  </div>
  <div class="item">
    <img src="https://picsum.photos/190/190?12" />
    <span class="caption">This is an image caption for image 12</span>
  </div>
  <div class="item">
    <img src="https://picsum.photos/190/190?13" />
    <span class="caption">This is an image caption for image 13</span>
  </div>
  <div class="item">
    <img src="https://picsum.photos/190/190?14" />
    <span class="caption">This is an image caption for image 14</span>
  </div>
  <div class="item">
    <img src="https://picsum.photos/190/190?15" />
    <span class="caption">This is an image caption for image 15</span>
  </div>
</div>

---

---

Then we need the main CSS. Within that, we define a space between the images of 10 pixels and a minimum column width of 150 pixels. The maximum column width results automatically.

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

.myGallery img {
  width: 100%;
}

If you want to use captions, we need a bit more CSS to style these captions. For our example we style it similar to the classic skin of Gridzy.js 😏

.myGallery .item {
  position: relative;
  overflow: hidden;
}

.myGallery .item img {
  vertical-align: middle;
}

.myGallery .caption {
	margin: 0;
	padding: 1em;
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	width: 100%;
	max-height: 100%;
	overflow: auto;
	box-sizing: border-box;
	transition: transform .5s;
	transform: translateY(100%);
	background: rgba(0, 0, 0, .7);
	color: rgb(255, 255, 255);
}

.myGallery .item:hover .caption {
  transform: translateY(0%);
}

That’s it!

Here you can see the live example:
https://codepen.io/eHtmlu/pen/BaodGVp

If you need something fancier, just dare a look at Gridzy.Gallery.

---

---

In the next blog article I’ll show you how the same can be done with Gridzy.js ✌😉