"no gutter" option for grids

[eswanzey]

I have a case where a Grid (type Fluid) is causing a horizontal scrollbar to appear in the browser because rows have a default horizontal gutter of 1.5 rem (the css is --bs-gutter-x:1.5rem on the row).

My suggestion is to add a "No Gutters" option for the Grid block that would apply the style "g-0" (a bootstrap 5 class) to the row that the grid encloses, which would set the gutters to 0.
.

The attached photo illustrates what I describe.

[Tychodewaard]

In addition: a setting to control the gutter width (including 0) would be awesome.

[meetmandeep]

This can be easily resolved by removing the padding/margin on the Grid using the Styling Tab; it does not need any new options.

[X3Technology]

That's not quite the same thing. First, the columns widths snap to the 12 column layout by setting the column class to .col-[viewport]-[cols] (ie., .col-lg-4). So, if I wanted a 2 column layout with the outer edge of each column lining up with the .container, I could use alignment "between" (which is really just setting inline CSS of 'justify-content: space-between' on the .row element -- same thing the BootStrap 'justify-content-between' class does!), but I would then have to leave a 2 column gutter between the columns to make it look balanced. What if I just want the gutter to be twice what the default is? Or, what if I want no gutters at all which was the what the OP was about?

That's what the .row gutter classes do. Also, if I have a 6 column grid, I shouldn't have to modify the width/padding/margin of each individual column separately when what I am really after is a property of the parent .row element and is functionality that is already provided by default in BootStrap. Why not use what the framework provides?

I guess I am confused by the pushback on this. Is it a significant amount of work to implement these properties for the .row element? Is there some technical hurdle? Do you think the BootStrap grid gutter classes are not useful?

[X3Technology]

I'd be happy to do a pull request for the Grid block once you teach us how to build for Vanjaro :)

[meetmandeep]

@mathisjay We'll take you up on that offer.

There's always more than 1 way to skin the cat and sometimes it's okay to sit back and analyze all options before jumping on the obvious one; gutters in this case :)

We DO NOT intend to build a UI for every available Bootstrap Option. It's easy to add Gutters but then there is Horizontal and Vertical Gutters. Then there are multiple built in classes. What about custom gutters? You can just as easily achieve this by overriding the padding/margin on Grid or Columns. That's what gutters classes are doing. Am I missing something?

[meetmandeep]

Perhaps, the missing piece is what you described in #1695 - ability to add custom classes to .row element.

[X3Technology]

Yes indeed! If I could select the .row element, I could just add a '.g-0' class to the .row and be done with it. I think it would be nice to have a fancy UX where I can point and click to do it, but I get the desire to not overwhelm the novice user with a bunch of clutter they probably will never use.

[X3Technology]

This is very similar to my request here: #1695
BootStrap's gutter classes are applied on the .row element:
https://getbootstrap.com/docs/5.1/layout/gutters/

We need the ability to select and manipulate the .row element.

[Tychodewaard]

Sure, that would ok too 🙂

…

________________________________ Van: mathisjay ***@***.***> Verzonden: donderdag 2 september 2021 16:56 Aan: vanjarosoftware/Vanjaro.Platform ***@***.***> CC: Tycho de Waard ***@***.***>; Comment ***@***.***> Onderwerp: Re: [vanjarosoftware/Vanjaro.Platform] "no gutter" option for grids (#1637) This is very similar to my request here: #1695<#1695> BootStrap's gutter classes are applied on the .row element: https://getbootstrap.com/docs/5.1/layout/gutters/ We need the ability to select and manipulate the .row element. — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#1637 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ACFLXHIJMR4EL7MZHE4JAYLT76GDXANCNFSM5CN24ZSA>.

[eswanzey]

Yep, same here. From: ***@***.*** ***@***.***> Sent: Thursday, September 2, 2021 3:49 PM To: vanjarosoftware/Vanjaro.Platform ***@***.***> Cc: eswanzey ***@***.***>; Author ***@***.***> Subject: Re: [vanjarosoftware/Vanjaro.Platform] "no gutter" option for grids (#1637)

…

---------------------------------------- Yes indeed! If I could select the .row element, I could just add a '.g-0' class to the .row and be done with it. I think it would be nice to have a fancy UX where I can point and click to do it, but I get the desire to not overwhelm the novice user with a bunch of clutter they probably will never use. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. [Image removed by sender.]