Make the images same size in grid card

Question

I made some card using grid and flexbox for the content. The image is not the same size each cards. I use the display grid for the wrapper and flexbox for the card content. I tried to use flex-grow and flex-basis in the trackcard_header class, but nothing works. I attach the sample of my code result below, please take a look to the snippet too.

Here is the screenshot:

And this is my snippet:

.createpl_card_wrapper {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 2rem;
  grid-row-gap: 1rem;
}
.trackcard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 1rem;
  background-color: rgba(0, 0, 0, 0.2);
  width: 100%;
  padding: 1rem 0.5rem;
  position: relative;
}
.trackcard_header {
  width: 80%;
  margin: auto;
}
.trackcard_header img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
}
.trackcard_body {
  padding: 1rem;
  flex-grow: 1;
  text-align: center;
}
.trackcard_body h2 {
  font-size: 1.5rem;
}
.trackcard_body h4 {
  font-size: 1rem;
}
.trackcard_footer {
  width: 80%;
  margin: auto;
}
.trackcard_btn {
  width: 100%;
  padding: 0.25rem 0;
  background-color: #1db954;
  border-radius: 0.5rem;
  border: 1px solid #1db954;
  color: #fff;
}
.trackcard_btn:hover {
  background-color: #18a349;
}



  
    Parcel Sandbox
    
  
  

  
    
      
        
          
        
        
          GANADARA (Feat. IU)
          
            Jay Park - GANADARA
          
        
        
          
        
      
      
        
          
        
        
          eight(Prod.&Feat. SUGA of BTS)
          
            IU - eight
          
        
        
          
        
      
      
        
          
        
        
          Good day
          
            IU - REAL
          
        
        
          
        
      
      
        
          
        
        
          Celebrity
          
            IU - IU 5th Album 'LILAC'
          
        
        
          
        
      
      
        
          
        
        
          BBIBBI
          
            IU - BBIBBI

I want to make the images is in the same size, both vertically and horizontally. Could anyone give me solution? Thank you in advance.

Sigurd Mazanti · Accepted Answer

That can be achieved with some JavaScript.

First you select all the elements with querySelectorAll. You then make an array of its height with offsetHeight. Math.max returns the largest sum of the input parameter.

In a for loop, you can set the elements minHeight with Math.max. It keeps looping until it finds the length and then applies the styling. Keep in mind this will apply the height of the largest image as min-height on all of your images.

And while we're at it, I did the same thing for the h2-elements, so they're aligned equally in all the cards. I separated the JS so it is easier to read and understand. The only gotcha is you have to reload the page if you drag the screen size, as the min-height will be a bit off.

As for CSS I used grid-template-columns: repeat(5, minmax(200px, 1fr)); instead. This way there will always be 5 columns that are atleast 200px wide, so they have an equal size. If you want a responsive effect, just edit the 5 out with auto-fit, this way they will wrap on smaller screens.

Like so:

grid-template-columns: repeat(5, minmax(auto-fit, 1fr));

If you want to change the width or height of your images, I suggest using max-width and max-height for a responsive effect. If you don't change the width, they will look a bit stretched.

You can apply object-fit: cover; on the images also, this way the image won't be stretched, but a bit of the image will be cut off instead.

I hope this helps you! Snippet below will not work properly, check Codepen: https://codepen.io/sigurdmazanti/pen/qBpLGXe

let img = document.querySelectorAll(".trackcard_header img");
let text = document.querySelectorAll(".trackcard_body h2");

// Image
let imgLength = Array.from(img).map(e => e.offsetHeight);
let maxLength = Math.max(...imgLength);


// H2
let textLength = Array.from(text).map(e => e.offsetHeight);
let maxTextLength = Math.max(...textLength);

// Image for loop
for (let i = 0; i < img.length; i++) {
  img[i].style.minHeight = maxLength + "px";
}

// H2 for loop
for (let i = 0; i < text.length; i++) {
  text[i].style.minHeight = maxTextLength + "px";
}

.createpl_card_wrapper {
  margin-top: 2rem;
  display: grid;
  /*grid-template-columns: repeat(5, 1fr); */
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  grid-column-gap: 2rem;
  grid-row-gap: 1rem;
}

.trackcard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 1rem;
  background-color: rgba(0, 0, 0, 0.2);
  width: 100%;
  padding: 1rem 0.5rem;
  position: relative;
}

.trackcard_header {
  width: 80%;
  margin: auto;
}

.trackcard_header img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  /* Consider this */
  object-fit: cover;
}

.trackcard_body {
  padding: 1rem;
  flex-grow: 1;
  text-align: center;
}

.trackcard_body h2 {
  font-size: 1.5rem;
}

.trackcard_body h4 {
  font-size: 1rem;
  margin-top: auto;
}

.trackcard_footer {
  width: 80%;
  margin: auto;
}

.trackcard_btn {
  width: 100%;
  padding: 0.25rem 0;
  background-color: #1db954;
  border-radius: 0.5rem;
  border: 1px solid #1db954;
  color: #fff;
}

.trackcard_btn:hover {
  background-color: #18a349;
}





  Parcel Sandbox
  




  
    
      
        
      
      
        GANADARA (Feat. IU)
        
          Jay Park - GANADARA
        
      
      
        
      
    
    
      
        
      
      
        eight(Prod.&Feat. SUGA of BTS)
        
          IU - eight
        
      
      
        
      
    
    
      
        
      
      
        Good day
        
          IU - REAL
        
      
      
        
      
    
    
      
        
      
      
        Celebrity
        
          IU - IU 5th Album 'LILAC'
        
      
      
        
      
    
    
      
        
      
      
        BBIBBI
        
          IU - BBIBBI

Make the images same size in grid card

Answers (2)

Related Questions