Question for the CSS (grid?) experts

hi, I have this new re-build where there are 5 CPT queries on the frontpage and they each show 5 items that are checked by client (“show on front-page”) . See current website::

I go rebuild this site, which has become a disaster by the former developer who used crocoblock and element or and 30 plugins :wink: in Cwicly.

What I want is this ‘grid’ having a responsive layout where all squares are fluent in size, keep their 1/1 ratio and use 2 or 3 breakpoints. So 7 squares wide on large screens and 2 wide on mobile.

The only solution I come up with is float:left; which feels old-fashioned nowadays with CSS grid at hand.
Anyone having better solutions in a more flex box/CSSgrid way?

See what I want to achieve in this image:

Thanks in advanced!

Hi @webmaat,

This is very simple to do with a CSS Grid and Cwicly’s grid builder is perfect for it, so I highly recommend this approach rather than float: left.

By taking advantage of the auto rows / columns, you can simply set the number of columns responsively for your breakpoints.

Grid container - desktop:

Grid container - mobile:

Grid items:

Hopefully this gives you a quick solution.

But how do you get the floating this way? See Frame-1 hosted at ImgBB — ImgBB > in this example blocks 'category A and category B also must fit (float) in between the queries…

Your example is a grid in which all is possible. of course. What I mean is how will I be able to make a grid where second grid-item will be able to behold the query with 5 items in it so this 2nd grid-item will wrap to the second line in relative to every breakpoint.