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.

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.

1 Like