CSS grid advice

  • I have a puzzle I am somewhat hung on. We are trying to set up a page where we have it going automatically to 3 columns. Note the automatic. We can’t use the columns block, because we need to be able to drop a new block in, and the ones next to it just push right over, with the one at the end dropping to the next row.

    Each block features a shortcode (video) and then a synopsis underneath. Unfortunately, the various blocks are not all the same height because of the synopsis. Not even close. We have some very tall ones and some very short ones. So when one breaks under the others sometimes it hangs up and doesn’t go all the way over in a neat grid. It hangs up on that tall block. Clear: left isn’t working. Min-height also doesn’t work, because to compensate for the all ones it has to leave a huge gap when there are short ones.

    Does anyone have any advice? This is not my site. I have no control over the length of those synopses. We just want it to be easy to update.

    • This topic was modified 2 years, 11 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    While it’s feasible to size all containers to be the same size, you’d have to size them for the largest possible content, leaving big blank areas in all the others. To accommodate varying sizes, yet have something like an organized grid appearance without blank areas, I recommend a “Masonry” layout script. IIRC, this was the original masonry jQuery library: https://masonry.desandro.com/

    There are a good number of variants these days if you do a bit of searching. There are even a good number of masonry plugins in the WP repository, though I’ve no experience with any of them. Many appear to be for image galleries. Perhaps they’ll work for videos as well. Ideally you’d want one that works with any sort of structured list. The Desandro library does this, but it’s not a WP plugin, so you’d have to manage the integration yourself.

Viewing 1 replies (of 1 total)
  • The topic ‘CSS grid advice’ is closed to new replies.