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.
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 
what? She does not work
Let’s add a comma between the classes in the code
how looks in editor
badly 
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
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 
.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;
}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
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?
It seems to work in the front end, but not in the builder… am I doing something wrong? Or the structure of the markup has changed?
From the inspector, seems that the structure has been changed… But definitely I am doing something wrong.
The container (inside a section) has a class of contenedor, four DIVS inside with classes i1, i2, i3, i4
.bricks-is-frontend .contenedor,
.contenedor > .bricks-container-inner {
background-color:lightblue;
display: grid;
grid-template-columns: repeat(4, 1fr);
/* ... */
}
/* Reset other .bricks-container-inner inside .grid-container > .bricks-container-inner in the builder */
.contenedor> .bricks-container-inner > .bricks-container-inner {
display: inherit;
background-color:blue;
}
.i1{background-color:tomato;}
I am using 1.5.7
Hey Pablo,
Please check out the changelog for Bricks 1.4: Changelog – Bricks
Since then, the markup changed significantly (no .bricks-container-inner anymore) 
thank you very much… I made it work but not the view in the builder…
