CSS Grid does not display correctly in the editor, but works in the frontend

Bricks Version: 1.3.3
Browser: Chrome
OS: Windows

I try to use CSS Grid in Bricks before it goes mainstream, but I notice that bricks do not know how to display layers correctly in the editor, I observed this with various code (and this is not due to the fact that the bricks do not support the grid, the CSS grid is not a script library that needs to be loaded separately, this is part of the CSS and the result in the frontend is you you can see in the screenshots)

Adding your own CSS grid solution requires some adjustments in the builder.

Due to the additional element action and spacing elements in the builder, all containers are wrapped in an additional div, which has a class named .bricks-container-inner.

If you inspect the HTML in the builder you’ll spot it really quick. So you’d have to account for that one in your custom CSS code as well.

1 Like

I spent a lot of time testing this (since I had quite a few bugs and I cannot understand what the problem is in versions 1.3.4 or 1.3.3) but still I will show you what happens when I add this class in versions 1.3.3 and versions 1.3.4. beta

start with 1.3.3 i add .bricks-container-inner class

how it looks in the editor

yeah is good, but, try to looks in frontend :smiley:

what? She does not work

Let’s add a comma between the classes in the code

how looks in editor

badly :frowning:

but how looks in frontend

wow is looks perfectly

Now I instal 1.3.4 beta

trying everything in a new way, first with a comma between the classes

how looks in editor

same

how looks in frontend

same

I delete comma

how looks in editor

amazing

how looks in frontend

badly :frowning:

I delete class .bricks-container-inner

how looks in editor

how looks in frontend

As you can see, nothing good comes out of this, I spent a lot of time showing it all to you, but I had a way where I did not understand what was happening at all since the code stopped working as a whole, I was nervous, but I rewrote it and realized that there was a problem somewhere, but your advice did not become a solution. In other letters about the CSS, I wrote that a lot of the code does not work properly, in one message you confirmed that this is a bug and there is a need to remove the important! from the code …

I hope my hours spent on testing will not be in vain and you will finally understand what the problem is and solve it. otherwise, I will be sorry about the time spent and trying to convey to you that the problem is in the builder’s code, where I can’t say I don’t know vue.js

Hi @davidovmihail,
Thomas advice is a 100% correct and there is no problem in the builder code, but in your code :wink:

.bricks-is-frontend .grid-container,
.grid-container > .bricks-container-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(20%, 1fr));
  /* ... */
}

/* Reset other .bricks-container-inner inside .grid-container > .bricks-container-inner in the builder */
.grid-container > .bricks-container-inner > .bricks-container-inner {
  display: inherit;
}
1 Like

Yep is works absolutely

.bricks-is-frontend .grid-container, .grid-container > .bricks-container-inner {
grid-template-columns: repeat(4,minmax(20%,1fr));
display: grid;
flex-wrap: wrap;
grid-gap: 1em;
align-items: stretch;
flex-wrap: wrap;

}

.item1 {grid-column: span 1;}
.item2 {grid-column: span 2;}
.item3 {grid-column: span 3;}
.item4 {grid-column: span 4;}

now I see all changes in the editor and in the frontend, Thank you very much

I no longer wait for the release of the CSS grids for bricks, as it is more convenient for me to work with my settings, but this may be needed for those who do not know anything about how to use the code.

But I want to see how the styling with classes will work, so I also have questions and suggestions about them, I wrote in private messages, and I was prompted to wait for the updates, since everything will work as it should.

there is only a small part of what worries me, but I wrote about this in the mail and maybe soon everything will be clear to me.

The transition from oxygen to bricks seemed to me the same, but there are several nuances, for example, above I did not add the CSS class correctly, but in oxygen everything works as I initially showed, which is why I thought that something was wrong with the theme code

1 Like

I want to show you another problem (also related to the grid and not only) this is the problem with the width when there is a wide

as you can see, the width of the columns is wrong, and even if you change the width in another place, it is also not correct

but if I set boxed, everything works well

But how can you understand I need the full width to fill the top sections and it is limited, what should I do?