Streaming live at 10am (PST)

Possible to keep grid proportions square?


#1

Hey!

I’m working on a portfolio project and wanna make square album thumbnail links using grid, and I’d love each thumb to keep perfect 1:1 proportion even upon resizing.

Is it possible with grid?


Here is my site Read-Only: LINK


#2

Nope. grid doesn’t work that way. But if you just want your thumbnails to be responsive and perfectly square at the same time there is this neat trick:

The bottom (or top) padding (or margin) for any element if set in percentages is going to be calculated from the element’s width (that’s just how css specs work, there is no common sense here :D). Therefore if we create any grid element as our parent and put our div inside, giving it 100% width to fill this grid element, then adding top or bottom padding of 100% to our child div the result is perfectly square div.

All that is left to do now is use absolutely positioned children inside this div to put content in it and that is all!


#3

Thanks Alex @dram
But not sure I am quite following.

I have a div called “album-img” inside my grid, I gave it 100% width and bottom margin 100% . This produces rectangles for me, not squares. I’ve tried playing with children alignment inside the grid (center instead of stretch), but that didn’t change anything.

When I set this album-img div to absolute it produced something very weird.

Also not sure how do I set up grid columns and rows in that case?

Confused.

My project share link

Right on the first page.

Thanks in advance


#4

Of course it does hence you need to absolutely position your children inside this div as I said.

Yes, but why did you do that? Don’t :slight_smile:

However you like really, this doesn’t change the thumbnail’s “squareness”!


#5

Ahh, that’s what it is, it’s children, not itself…

Thanks , this works just awesome !