How to set CSS grid as default in Theme Styles

How To
1

Hello,

I’m curious if there’s a built-in method to establish the default display style of Sections, Columns, and/or Divs as “display: grid” without resorting to custom CSS.

In the Theme Styles, I can currently designate my sections as either Flex or Block. However, I prefer working with CSS grid for my website designs. Ideally, I’d like to apply this setting across all sections at once, and then adjust the column spans based on my global grid settings for the respective section.

Is there a way to achieve this?

Thank you!

1 Like
2

I was about to post a topic about this as well.

Would doing so break Bricks’s fundamental structure/layout functionality in some way? If not, it would be great to have be able to set the <body> element as grid, complete with all of the Bricks UI elements for managing grid setup.

Otherwise, we have to use custom CSS, or if we want to use the Bricks UI, we have to resort to a wrapper div.

I’d also welcome this change

1 Like
3

Agreed. Hopefully the devs either give an answer on this so I can implement it myself or put this on their agenda to push out. :smile:

1 Like
4

Hi guys,
the Bricks layout and its section, container and block elements are flexbox based. Therefore there is no “grid” option in the theme styles.

However, you can simply override the display property in the Bricks settings » custom CSS and set the section, container, block, body or whatever to display: grid.

The change is at your own “risk”. If something doesn’t work the way it does with display: flex, it’s up to you :v:

2 Likes
5

Gotcha, that’s what I suspected based on the docs. Thanks for the clarification!

6

If you implement it yourself in some more complex way than just adding grid properties to the custom CSS, and want to share, please do!

1 Like