Just a quick tip on a way to deal with the issue described in this post, whereby you’d like explicit control over the number of RG columns displayed at any given page width.
Until Bubble provides such a feature in the editor, one way to achieve a more versatile grid layout is with a bit of custom CSS.
Bubble’s built-in RG behavior results in the number of columns decreasing by one as the page width decreases. You can see that it changes from 4 > 3 > 2 > 1.
Using some custom CSS and a conditional, the number of columns can be forced to go from 4 > 2 instead. This example also reduces the gap between cells at smaller page widths, which is not strictly necessary - it just looks nicer. Here’s the CSS…
btw there are almost unlimited possibilities with adding just a little bit of css combined with the new responsive engine. so it would be great if bubble makes it possible to add it to the element directly instead of going with the id and extra html element.
FWIW, the CSS should ideally be added at the page or app level, so the HTML element isn’t strictly necessary. I include it with my examples for ease of distribution and for those on a free plan (where adding to the document head is not allowed).
EDIT
Although the HTML element does make it convenient for using conditionals where styles should change based on page width.
Thank you very much for this suggestion. I was looking for it.
I have an rg that should fill the entire width of the screen, with columns that is dynamic to a list I have on this screen.
However, the last column is still at minimum width. e.g. For a 4 column rg the first 3 width were ~30% and the last one is the original size of the element. i.e. didn’t change.
<style>
#rg-prod-grid {
gap: 15px !important;
grid-template-columns: repeat(auto-fill, minmax( [[THIS IS WHERE I COUNTED THE PERCENTAGE i.e. 25%]], 1fr)) !important;
}
</style>
Are you using a conditional to change the contents of the HTML element from empty to the custom CSS at the desired page width? Might help to add the working example to your own playground app so you can dissect it (if you’re not averse to installing the browser extension).
Just to be clear, Bubble’s default RG behavior works fine in most situations. The custom CSS tip described in the initial post above specifically addresses the issue referenced there. If you want different behavior, you’ll just have to tinker and explore. I generally recommend avoiding custom CSS unless it absolutely necessary to get the desired behavior. Keep it simple.
Click the link in the lower left of the working examples above.
Not to bore you with details, but your solution worked perfectly for what i wanted to achieve.
The default RG is to “reserve” place for empty cells if you know what I mean.
Because I don’t how many list items i kept the rg column min-width to 10px. But the problems is bubble will not ignore the rest of empty space and reserve it. But it’s not how i need it to behave.
So i used your suggestion and now my i can tell bubble how much each each column size should be in percentage — because I wasn’t able to set it dynamically in the rg responsive minimum column width.
Your solution worked perfectly for all cells except the last one for example if i have 2 columns the first will fill 90% and the last will be the size i set in the rg settings (10px).
I tried to tinker with the css but i’m not an expert. So i wanted to reach out maybe there was an obv workaround that im not familiar with.
guys is there a way to do the same with rows ? I tried but i can’t find a way to replace
grid-template-columns: repeat(1, minmax, (0px, 1fr));
by
grid-auto-rows: minmax(max-content, 100%);
Hello everyone, this would help me but I’m new to bubble and I don’t know how to implement the CSS, I inserted an html element and after the # I inserted the name of the rg but I see no changes.
I’m using the new responsive engine
and it doesn’t make larger columns but even in large screens it makes 150 columns even if there is more empty space on screen
Can I set the maximum width too?
cause I’m getting this (were I set the max width of the pictures to be 350 px but columns are still 33% and there is blanck spaces around while i’d like to have them centered.
with a minimum column width of 25% i suppose it’s creating 3 columns of 33% but I’d like to have a maximum of 25% column width, I tried minmax(20%, 25%) but doesn’t work.
Maybe I’m doing something else wrong
P.s. out of curiosity, to understand; has the added CSS any side effect to the app? like making it a little slower or anything like it?
Without this workaround I had to create 2 different rg one for mobile and one for desktop, so thanks a lot
Yes thanks for the reply, I don’t know what I was doing wrong, seems it’s working now, but I haven’t understood how the new options bubble added work as I can’t get the same results, but haven’t gone too deep experimenting
