Ideas for a more granular layout grid, aka more columns

The 12 column layout was a very helpful paradigm css/html development and it was quite natural for Retool to use it as well since it lived in that world. However, when you are laying out complex desktop application style UIs, it can be very limiting.

A couple of ideas to help us out with those more complex layouts.

The first would be a new lightweight container component. By lightweight I mean no border, padding or margins (or maybe these are definable.) Since each container gives us another 12 rows we can make the layout grid as fine or course as we like. The problem with using the current container is the added space the padding and margins take up. Maybe the current container could be modified by adding padding/margin properties..

The second option would be to give us a user definable grid as many apps do. The simplest option from the user standpoint but would be much harder to implement I imagine.

9 Likes

Hey @bradlymathews! I'm happy to say that all of this is in the works!

First up will be a new "unstyled" container option that should be available sometime next month. We also have plans to give editors much more control over the grid (e.g., column count, widths, spacing, etc), but that's unlikely to land until later in the year.

3 Likes

Any update on the "unstyled" container option?

3 Likes

God had other plans? :slight_smile:
The fixed 12 columns grid layout is very limiting as @bradlymathews mentioned.

2 Likes

Agreed. The grid column width is a constant frustration we run into when building in Retool.

Ditto on this. Even making the columns 24 would help.

Hi, any updates, this is very important

1 Like

Agree - I'd love to see this as an option - 12 columns makes things really difficult design wise.

Agree, more columns would be really helpful creating the ui. Layouts get crowded now or have a lot of whitespace between components.

Hey all! No updates on making a higher-resolution grid at the moment but I have bumped it with the dev team.

@garrett's suggestion of using an unstyled container has become more possible though. Containers will maintain their buffer but it is possible to make them otherwise invisible so that they can functionally offer more granular columns: