Hello,
We just pushed a few improvements to the grid in the design tab. You can now define a gutter, in addition to the simple grid we used to have, which will help building more consistent designs.
The colors and widths of the grid and the gutter are customizable to work with your design as you’re building your app.
Awesome! Thanks for the update, that’s awesome.
wow, that’s really helpful.
This looks like a nice feature. Could you explain what gutters are, how to use them, and how they make app layouts more consistent?
Thanks
TL;DR: Gutters help with your design alignment and element width consistency.
The gutters are used for spacing and alignment. If you look at frameworks like Foundation, Bootstrap, Sassgrid, or others, they all use this gutter concept. Elements take up a certain number of columns, depending on screen width, and you use gutters to make sure no elements are just stuck floating in the gutter.
I had the same question a few days ago. I had seen designers using these gutters but I have never understood how they use it. This guy’s YouTube channel really gave me great insight into app design (and the first time I understood how to use gutters): https://www.youtube.com/watch?v=BMHUKij1yUE&t=344s
Speaking of lines and colours of lines - can we give the ‘show borders tool’ also the ability to change it’s colour. The colour of the border tool is #eeeeee which means if I have an #eeeeee background (a common grey colour to use in design) I have to keep changing it to #ffffff to see the borders…
I agree this will be very helpful. I always leave the background color till the end so I can see the borders
I have #fff fields on #eee and don’t really want to make background another colour as I want to get accurate look and feel on front end…
That’s a good idea, we’ll do this.
This is live, options are now under the Grod & Border menu.
That’s what I call good customer service! Where can I nominate Bubble for a customer service award? (Seriously).
I have other little things on my wish list that I’ll refrain from listing here 
is the Ideas section of the forum regularly looked at as my ideas submitted there are never implemented - maybe my ideas aren’t very good, be good to get feedback when an Idea is submitted.
Emmanuel you have personally had a direct impact on my own corporate customer service. I manage the releases for a large team of React developers with a long sometimes 2 year backlog with all the trimmings of an 8 person customer service team but since seeing the impact of you directly dealing with a Bubble request and implementing it, I have ensured that I personally email customers with good ideas to tell them it’s good and that I’ll try to get it out in the next release to production. I can literally feel the delight in their reply that a large corporation has not only listened to them but will try to get the feature out ASAP. Although asap for us is within a month. Bubble is also the reason I only work there 2 days a week now and Bubble the rest of the time, so thank you…
Duuuude! Nice one. Did I miss the announcement when you added this feature? In any case, thanks!
Hey guys, any plan on updating the Grid? We cannot set the margin separately. If you think about how margins are used, for example in Figma, the fact we can’t have separate margin size makes the tool almost obsolete in my opinion… Or did I miss something?
thanks!
Hello there, I am facing the same issue while i’m importing my designs from figma. Any improvement for this topic ?
thanks !
Has anyone found a workaround for this? I’m trying to set up a 12 column grid with gutters and margins but can’t quite figure it out.
