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:: https://leemangroup.com/
I go rebuild this site, which has become a disaster by the former developer who used crocoblock and element or and 30 plugins 
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: https://ibb.co/wW7ZqBs
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.
thanks
