How to do responsive grids natively?

How do I implement something like this: repeat(auto-fill, minmax(200px, 1fr)) natively in Cwicly?
I know I can write the CSS in a stylesheet, but is there a way to do it in the builder?

One of the decisions I’ve made in our workflow is to use fluid styling for anything that involves a dimensional unit (font-size, padding, margin, gap, etc). So we set one value that scales and adjusts across breakpoints, so we never have to fuss with different settings for each screen size. I absolutely love that Cwicly parses these into Tailwind utility classes, too.

I do the same with grids. So the number of columns will grow or shrink depending on device size, without me having to be prescriptive about it.

Side note: I’m loving the Tailwind integration in Cwicly! It’s user-friendly and no-code, and the HTML paste feature is the slickest thing I’ve ever used in web development. Big shout out to @Louis and the team for their awesome work!

1 Like

Hello @owynter,

Thanks for the enthusiasm and kind words, means a lot!

Depends if you’re wanting to fully use Tailwind or not.

If so, for fluid values and grid layouts, I would recommend creating your own Tailwind configuration so that you can easily access your preset values from the Cwicly UI instead of having them added arbitrarily as you are currently (or at least that is what I understood from your post).

This is very well detailed on every utility-class inside the Tailwind documentation, so please don’t hesitate to check that out: Grid Template Columns - Tailwind CSS

Once you’ve specified your custom values, Cwicly automatically detects them and shows them as a property option.

If you want to go the more traditional way, the grid builder should have you set:

Hope that helps!

2 Likes

Hi @owynter,

Please see the following threads for more examples:

1 Like

Amazing! Thanks!

@Louis, I will need to dig into the custom configurations to see how well we can integrate our workflow. This update comes at a very opportune time, as we had stopped taking on new client work to focus on some other things. I feel we can start out fresh with a more efficient process going forward.

Thanks, again.