Hi all,
I’m looking to build a page, if it’s possible, with these attributes:
-A grid / table of square images that’s responsive to screen width
-An ODD number of columns only, depending on screen width: 3, 5, and 7
-For narrow screens (mobile) it does a minimum of 3 columns (like Instagram), for laptop screens it goes up to 5 columns, and for desktop monitors/wide screens it goes up to 7 columns max
-The image slots always stay the same size as each other regardless of image size and stay square even if I add a rectangular image
What have you tried so far?
Usually we ask for you to have a go building it yourself and then we can help point you in the right direction.
What you ask for seems like an easy task for css grid and a couple of media queries.
Luckily for you I have a codepen that is similar anyway and can help you get started.
I don’t expect a paste and copy but instead use it as a basis for learning the steps involved.
You make a number of statements that are in some way contradictory so in essence something has to give one way or another. An image cannot be oblong and square at the same time without being cropped in some way.
You’re a legend thank you !
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.