How to build a responsive CSS grid with square items to display images with multiple aspect ratios

Question

I'm trying to build this responsive grid for an image gallery.

I want the grid items to be square-shaped at all times (aspect ratio 1:1), even though the pictures are coming in all sorts of aspect-ratios.

I'll probably display any picture inside the square items, using object-fit: cover.

I'm trying to get a solution that works well across browsers. Nothing too hacky. It's seems like a simple task but so far I couldn't wrap my head around it.

See an example on the code snippet that I've made.

Note: Every image needs to have an icon on top of it, just like the example.

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

.gridItemContainer {
  position: relative;
}


.grid img {
  display: block;
  object-fit: cover;
  width: 100%;
}

.grid i {
  font-size: 120%;
  position: absolute;
  top: 10px;
  left: 10px;
}

<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div class="grid"/>
  <div class="gridItemContainer"/>
    <img src="https://images-na.ssl-images-amazon.com/images/I/41g1xjf4CpL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer"/>
    <img src="https://images-na.ssl-images-amazon.com/images/I/4106U8dHTgL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer"/>
    <img src="https://images-na.ssl-images-amazon.com/images/I/41cSJCJ%2BSaL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer"/>
    <img src="https://images-na.ssl-images-amazon.com/images/I/41DpkMbHZZL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer"/>
    <img src="https://images-na.ssl-images-amazon.com/images/I/41i-GWf875L.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer"/>
    <img src="https://images-na.ssl-images-amazon.com/images/I/51LUVEJQbjL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
</div>

The question linked as duplicate only has answers that uses pseudo element. And also no answer was accepeted there. I like the answer on this one better. — cbdeveloper, Mar 29 '19 at 10:18

score 5 · Accepted Answer · answered Mar 28 '19 at 19:11

You can use padding-top: 100% to set the height of a grid item - this will make a square as padding in percentages is based on width in CSS.

Now make the image position: absolute so that it will be taken out of the flow and height will be fully dictated by padding-top set on the grid item (gridItemContainer) - see demo below:

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

.gridItemContainer {
  position: relative;
  padding-top: 100%; /* added */
  border: 1px solid;
  background: cadetblue;
}


.grid img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%; /* image fills the grid item */
  position: absolute; /* position absolutely */
  top: 0;
  left: 0;
}

.grid i {
  font-size: 120%;
  position: absolute;
  top: 10px;
  left: 10px;
}

<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div class="grid"/>
  <div class="gridItemContainer">
    <img src="https://images-na.ssl-images-amazon.com/images/I/41g1xjf4CpL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer">
    <img src="https://images-na.ssl-images-amazon.com/images/I/4106U8dHTgL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer">
    <img src="https://images-na.ssl-images-amazon.com/images/I/41cSJCJ%2BSaL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer">
    <img src="https://images-na.ssl-images-amazon.com/images/I/41DpkMbHZZL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer">
    <img src="https://images-na.ssl-images-amazon.com/images/I/41i-GWf875L.jpg"/>
    <i class="fas fa-star"></i>
  </div>
  <div class="gridItemContainer">
    <img src="https://images-na.ssl-images-amazon.com/images/I/51LUVEJQbjL.jpg"/>
    <i class="fas fa-star"></i>
  </div>
</div>

This is great! Thank you so much. I didn't know about the padding-top. — cbdeveloper, Mar 28 '19 at 19:19

How to build a responsive CSS grid with square items to display images with multiple aspect ratios

1 Answers1

Linked