Apply Grid Setting to Canvas at...

User 244626 Photo


Registered User
811 posts

It seems that this apply method "Apply to Canvas" in the Grid Editor should include the breakpoint selector choices between breakpoints px and px so I can only apply changes to the grid layout between breakpoints and not have to choose a certain breakpoint and higher ? I do not want to overwrite grid on the top end or bottom....just in between certain breakpoints.

Bootstrap 5 CSS Grid.
User 379556 Photo


Registered User
1,533 posts

I suspect that the situation may be as follows.

1. The grid settings are put in main.css like one's style settings.
2. Style settings actually made at a higher breakpoint and above are not overwritten by style settings made at a lower breakpoint. It is only when style settings have not actually been made at the higher breakpoint that there is the illusion of overwriting: it is just that, where no setting has been made at the higher breakpoint, it displays the settings of the the previous breakpoint.
3. For example,
(a) at the lowest position (i.e. 'Disable All Breakpoints') I set the background colour of a container to green;
(b) at the highest breakpoint I set the background colour of that container to green (even though it is already displaying as green);
(c) at an intermediate breakpoint I set the background colour of that container to blue.
The setting at (c) does not overwrite the green at the highest breakpoint.

The above situation is useful, as otherwise one would presumably have to set each style individually at each breakpoint, instead of being able to allow styles at higher breakpoints simply to be inherited from what was set at lower breakpoints.

In the Grid Editor, the same situation seems to apply (as long as one simply adjusts the settings, and doesn't click on Reset Grid). Settings at intermediate breakpoints don't overwrite settings actually made at higher breakpoints.

Frank
User 244626 Photo


Registered User
811 posts

Ok that logic still does apply, thank-you. I was not using just the "OK" button in the Grid Editor if I wanted to make a change to just a single breakpoint section layout style.

One thing I must remember then, if I am having the same layout between two groups of breakpoints is to always make sure I am at the lower breakpoint setting so when I use the "Apply To" option in the Grid Editor it will make the changes for both breakpoint sets. If I forget and I choose the higher breakpoint of the set, I can also just do a "Reset Class Style" for the grid-template and then go the the lower breakpoint section and do the "Apply To" over. Otherwise, as you indicated, that breakpoint layout will be a new style.

Thanks Frank
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

In the Grid Editor the only difference in function between "OK" and "Add to Canvas" seems to be that clicking "Add to Canvas" saves the changes to the breakpoint selected and leaves you in the Grid Editor and "OK" is going to save the changes and just exit. Other than that they do the same thing.
Bootstrap 5 CSS Grid.
User 379556 Photo


Registered User
1,533 posts

Twinstream wrote:
One thing I must remember then, if I am having the same layout between two groups of breakpoints is to always make sure I am at the lower breakpoint setting so when I use the "Apply To" option in the Grid Editor it will make the changes for both breakpoint sets. If I forget and I choose the higher breakpoint of the set, I can also just do a "Reset Class Style" for the grid-template and then go the the lower breakpoint section and do the "Apply To" over. Otherwise, as you indicated, that breakpoint layout will be a new style.


I have not managed to demonstrate that the procedures in the above quote work, even though I see the logic. I wonder whether those procedures can be made to work.

What I did to check on the non-overwriting with Grid Editor was to set up a grid at the highest breakpoint, and then go to a lower breakpoint and set up a grid. The one set up at the lower breakpoint did not overwrite the one at the higher breakpoint (i.e. more or less desktop-down rather than mobile first.)

Frank
User 244626 Photo


Registered User
811 posts

Frank Cook wrote:
Twinstream wrote:
One thing I must remember then, if I am having the same layout between two groups of breakpoints is to always make sure I am at the lower breakpoint setting so when I use the "Apply To" option in the Grid Editor it will make the changes for both breakpoint sets. If I forget and I choose the higher breakpoint of the set, I can also just do a "Reset Class Style" for the grid-template and then go the the lower breakpoint section and do the "Apply To" over. Otherwise, as you indicated, that breakpoint layout will be a new style.


I have not managed to demonstrate that the procedures in the above quote work, even though I see the logic. I wonder whether those procedures can be made to work.

What I did to check on the non-overwriting with Grid Editor was to set up a grid at the highest breakpoint, and then go to a lower breakpoint and set up a grid. The one set up at the lower breakpoint did not overwrite the one at the higher breakpoint (i.e. more or less desktop-down rather than mobile first.)

Frank


My grid layout for Bootstrap is as follows. For mobile below the lowest breakpoint I have 8 rows - no columns in the grid layout. In the next 3 break point sections I have 4 rows and 2 columns. At the largest break point for desktop I have 2 rows and 4 columns. If I decide at some point to change the middle group, I must make sure I choose the smaller break point area to make any layout change so it propagates upward to the other 2 break point areas. If a mistakenly make a change to the 2nd or 3rd member of the break point "group", then that will create a new grid area. I guess that is why we have this very neat additional tool (Apply To and the Breakpoint Selector) so we can "cycle" through the grid layouts and then choose the "correct" one based on the mobile up design theory if one is going to change the grid layout.

(It kind of reminds me of learning RSD 1.5 for the first time and doing the Visions Tutorial.....that first part of the bell curve)
Bootstrap 5 CSS Grid.
User 379556 Photo


Registered User
1,533 posts

Thanks for that, Twinstream. I have successfully replicated that.

The principles in my first post in this thread do indeed seem to apply, but I find it helpful at present to keep an eye on what the main.css file is actually setting (Element panel, Your CSS...) at each breakpoint. I tend otherwise to think in terms of individual rows/columns rather than template sets of rows/columns.

Frank

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.