[Resolved] Logos in a grid of squares

[Tim]

Hello

I’m trying to follow this CSS tutorial for putting logos in a neat grid of squares: https://css-tricks.com/a-grid-of-logos-in-squares/

I build the content with this structure so far:

<div class="grid">
  <div class="entry-content">
   <figure class="client-logo-media">
    <img>
   </figure>
</div>

and using this CSS:

/* Client Logo List */

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

.grid > div {
    padding: 1rem;
    position: relative;
}

.grid > div::before {
      content: "";
      display: block;
      padding-bottom: 100%;
}

.grid > div > img {
      position: absolute;
      max-width: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}

.client-logo-media img{
	filter: grayscale(1);
}

.client-logo-media img:hover{
	filter: none;
}

I can see that the structure of <div> <figure> that I have is most likely breaking the selectors.

Please can you help me to mend this structure and/or css ?

Thanks

[David]

Hi there,

try this CSS instead:

.grid, .grid>div {
    display: grid;
}

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

.grid>div {
    padding: 1rem;
    position: relative;
}

.grid>div::before {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.grid>div>figure, .grid>div::before {
    grid-row: 1;
    grid-column: 1;
    justify-self: center;
    align-self: center;
}

.client-logo-media img {
    filter: grayscale(1);
}

.client-logo-media img:hover {
    filter: none;
}

[Tim]

Thank you David

That certainly helped, but I also needed to remove an additional and unnecessary <div> container for that to work.

Looking at the grid now, the CSS doesn’t seem to deal with vertical orientated images. By that I mean the squares become oblong when a vertical orientated image is in the row.

I see that in the codepen example https://codepen.io/chriscoyier/full/QWbojdO all the images used are landscape orientation, but even if I supplant one of those images for a vertical image, the box remains square: https://codepen.io/timoto/pen/bGVqdqq

I used this converter to turn SCSS into CSS: https://jsonformatter.org/scss-to-css

I made a new pen that seems to function as expected with standard CSS: https://codepen.io/timoto/pen/dyYvoVb

So when I now apply this to my site test case it’s ok but the images are not being contained within the inner box. I’m not sure how to fix the CSS to accommodate the <figure>

.grid {
	 display: grid;
	 grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	 grid-gap: 1rem;
}
 .grid > div {
	 padding: 1rem;
	 position: relative;
}
 .grid > div::before {
	 content: "";
	 display: block;
	 padding-bottom: 100%;
}
 .grid > div img {
	 position: absolute;
	 max-width: 100%;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
}

[Tim]

I supplanted <figure> with <div> in both HTML and CSS.

HTML
<div class="grid">
 <div>
  <img>
 </div>
</div>

So now the square containers stay square.

However, the issue with greatly differing aspect ratios remains, eg when the logo has much greater vertical length than width.

Looking at the images in the original codepen, it seems that they have all been pre rendered with the same proportional horizontal space between the edge of the image and the respective logo. The logos are also not vastly differing in aspect ratio, all being longer in the horizontal and only minor height differences.

So I don’t think there is much that can be done.

As a result my tall logos look far too dominant.

Do you have any suggestions ?

[David]

Try setting the logo img – max-height: 80px and width: auto;

[Tim]

Hi David

I had actually tried that already, but to no avail. The image simply squashes.

I also see that no matter where I put padding or margin, I cannot create space between the logo and the edges of the containing box. Presumably that’s why all the example logos had space added to the raster image itself.

I don’t really want to precompose the images in that way.

I’m hoping there is a superior solution to this method.

[Tom]

Hi there,

I just tried the max-height and width: auto method that David suggested, and it seems to do the trick?: https://www.screencast.com/t/8gHaP4tCPyy

[Tim]

Hello Tom

You’re so right. I think I must have placed auto elsewhere by mistake.

Thank you.

I have one more query about the grid. Whilst 2 lists, Clients and Partners, render as expected, I would like the shorter Partners list have its items justified to the center of the page instead of rendering from the left of the page as they do now.

I tried a few things with the grid such as justify-items: center; but this doesn’t seem to work even if I do something like set grid-template-columns: 1fr 1fr 1fr;

[David]

For that grid you would need to do this:

.grid {
    display: grid;
    grid-template-columns: repeat(3, 80px);
    grid-gap: 2rem;
    justify-content: center;
}

Any use of auto-fill or fractions is going to fill the entire row – hence justification is not visible.

[Tim]

Hello David

Thank you for that.

I swore I had already tried that configuration, but perhaps I only tried justify-items: center;

The grid is now centered, but the squares seem to have reduced in size a little. What is causing that ?

[David]

Your main grid uses minmax(80px, 1fr) which allows those elements to grow if there is room to do so, which there is. In your 3 item grid just increase the 80px to suit.

[Tim]

OK got it.

[David]

Glad to hear that

[Author]

Posts