Jack990 free asked 1 year ago


I was trying out the css grid, and the styles did not work, neither in the sandbox nor when I copied to my setup. see example below.

So my question is, should one be using css grid for new projects, instead of the old school grid? and is there an issue with MDB's implementation of it, or does the santbox work and there is something weird in my setup?

div class="grid" style="--bs-columns: 4; --bs-gap: 5rem;"

Kamila Pieńkowska staff answered 1 year ago

The new grid system won't work in the sandbox.

It is disabled by default. To be able to use it you need to change SCSS variable and recompile SCSS.

Instruction & examples: https://mdbootstrap.com/docs/standard/layout/css-grid/#section-how-it-works

Jack990 free commented 1 year ago

I know, I did that. I am saying the style= does not work

and even your own sandbox code does not work

Kamila Pieńkowska staff commented 1 year ago

You cannot change the value of the SCSS variable through HTML inline styling.

And because of that this is something you need to test locally. You need to use bundler and recompile SCSS code with the variable changed in _variables.scss file.

Jack990 free commented 1 year ago

Thanks. that is correct but then maybe your documentation and sandbox code is not exactly clear (unless I am doing something stupid). It says at the end of https://mdbootstrap.com/docs/standard/layout/css-grid/#subsection-gaps

One limitation of the CSS Grid is that our default classes are still generated by two SCSS variables, $grid-columns and $grid-gutter-width. This effectively predetermines the number of classes generated in our compiled CSS. You have two options here:

Modify those default SCSS variables and recompile your CSS.Use inline or custom styles to augment the provided classes.

and the sandbox code does not run correctly. (on my Bave on mac)

Mateusz Lazaru staff commented 1 year ago

I suppose it doesn't work in the sandbox because it's not enabled by default, and we haven't enabled it manually for this purpose. I agree it might be confusing, so we will think how to make it more clear.

Does CSS grid work, but inline styles are not applied, or it doesn't work at all?

Jack990 free commented 1 year ago

css-grid works fine in my code, except the inline. Same in sandbox.

The documentation is ambiguous.

That said, I don't think I need css-grid, was just experimenting, and wondering if to use it in a new project. The benefits of css-grid are unclear to me, the documentation is still limited and the old grid works fine.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 6.2.0
  • Device: mac
  • Browser: brave
  • OS: mac
  • Provided sample code: No
  • Provided link: No