Can I hire a CSS guru to make a grid that respects vertical bounds?

I have built and rebuilt a css grid for a very specific purpose, however all my attempts don't satisfy all requirements and customers are nearing riot levels of disdain. I need to come up with something that actually works as expected. Requirements: - Grid items resize to fill all available container area (vertical and horizontal) without overflow. - Grid container does not shrink below 600px wide. - Grid container does not shrink below 450px tall. - Grid container contains as few as 1 or as many as 12 squares (aspect 1/1 for all items in container). - Grid items do not collide with one another. No overlap. - Container can be at the root level or contained within the page margins. - Container expands to take up the max space available. - Ideal item size is 300px, however the minimum size is 150px (square). - If 1 item, the item expands to fill the available space without overflowing. - If 2 items, they are displayed side by side using maximum space available. - If 3-4 items, they are displayed in a 2x2 grid that expands to fill space. - If 5-9 items, they are displayed in a 3x3 grid that expands to fill space. - If 10-12 items, they are displayed in a 4x3 grid that expands to fill space. - The items MUST flow from top left to right and then flows to row 2, then row 3, always conforming to a left to right flow. - Items are clickable and expand to fill (I have this functionality done, but it's worth noting). - Items also have a hover effect which shows text which does not flow off the screen, and ideally does not overlap the image shown (they don't like my current solution that has overlap with the image). Technical limitations: Media queries are acceptable. Clamp, minmax, vmax, vmin, vh, vw, etc are all acceptable. Safari, Chromium and Firefox must be supported. Primary ux is desktop screens with very poor viewport space up to very good viewport space. Secondary ux is mobile which honors the constraints and layout of the items as seen on desktop Preview attached
2 Replies
jeffreytgilbert
jeffreytgilbertOP16mo ago
Pure CSS, no frameworks used. Example as shown above is the working system without the correct flow and order of items. There is a sidebar/header (shown on the right, needs to move to the left and or top depending on screen orientation). There is a control bar on the bottom which is likely to move to the top.
b1mind
b1mind16mo ago
Sorry Jeffrey but this is not a place for soliciting but a help community locking and closing thread as per #📝rules
Want results from more Discord servers?
Add your server