CSS Grid Integration

Ideas
1

Flexbox and CSS Grid are not replacements for each other, but compliment each other nicely.

If the upcoming version of BSS includes CSS Grid as well as multiple monitors, more fonts...

(regardless of licensing [adobe webkit etc.]), and a few other items already discussed that would be great.

2

This has already been mentioned here I think

3

It's different for a number of reasons. First, the post went off point badly. And next of all, an offer was made. I'm requesting that @martin follow through on his offer:

"If CSS gains traction we can add support for it. It will be a separate thing from the Bootstrap grid with its own set of components." -- @martin

4

It seems to be a good feature, if this topic gets more popular, then it might be implemented as he says. +1

5

CSS Grid is very powerful and lightweight tool, that is very-very clear to understand. I guess that is not very difficult to integrate it with BSS. +

6

I found this very interesting as a way to quickly add CSS Grid layouts using data-attributes.

https://blueprintcss.dev/

7

Please make CSS-Grid support in Bootstrap Studio as in Webflow a priority!

8

CSS Grid is already there since its using CSS for layout. The problem is that its a invisible grid layout requiring some form of visual tool to be used to be more effective for the user.

Any support of something like that would be a mistake in Bootstrap 4 because as soon as you would add something like a visual tool you would be nullifying the current Browser Supported Specification for Bootstrap 4. If maybe when Bootstrap 5 is released the Browser Supported list changes to be in line with CSS Grid then that would then be a option.

Bootstrap 5 will be a interesting release as there is talk of dropping jquery. And how do you handle the emergence of the competition starting to switch to CSS Grid layout models. Would Bootstrap 5 adopt something similar ?

9

Thread necromancy ftw :slight_smile:

Anyway, bringing this up again, as I see that my “other” app that I like to use, is going to get CSS Grid support with V5. It uses the Bootstrap Framework, like BSS does, but still supports CSS Grid with the new Version and visual controls.

I’d love to see that in BSS too. I really like the interface and workflow of BSS a bit more. Any news if (at all) and maybe even when this would be going to happen to BSS @martin ?

10

From the official Bootstrap Documentation…

With Bootstrap 5, we’ve added the option to enable a separate grid system that’s built on CSS Grid, but with a Bootstrap twist. You still get classes you can apply on a whim to build responsive layouts, but with a different approach under the hood.

  • CSS Grid is opt-in. Disable the default grid system by setting $enable-grid-classes: false and enable the CSS Grid by setting $enable-cssgrid: true. Then, recompile your Sass.

  • Replace instances of .row with .grid. The .grid class sets display: grid and creates a grid-template that you build on with your HTML.

  • Replace .col-* classes with .g-col-* classes. This is because our CSS Grid columns use the grid-column property instead of width.

  • Columns and gutter sizes are set via CSS variables. Set these on the parent .grid and customize however you want, inline or in a stylesheet, with --bs-columns and --bs-gap.

In the future, Bootstrap will likely shift to a hybrid solution as the gap property has achieved nearly full browser support for flexbox.

My guess is that when Bootstrap shifts to the “hybrid solution”, Bootstrap Studio will follow.