[Resolved] Logos in a grid of squares

Home Forums Support Logos in a grid of squares

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1250610
    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

    #1251031
    David
    Staff
    Customer Support

    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;
    }
    #1252449
    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%);
    }
    #1254399
    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 ?

    #1254852
    David
    Staff
    Customer Support

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

    #1255751
    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.

    #1256666
    Tom
    Lead Developer
    Lead Developer

    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

    #1258770
    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;

    #1260770
    David
    Staff
    Customer Support

    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.

    #1262226
    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 ?

    #1262618
    David
    Staff
    Customer Support

    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.

    #1269876
    Tim

    OK got it.

    #1270133
    David
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.