Hi!
I would like to make the above scenario that my elements will take these column-span properties (if we think in the general 12-column grid system), how can I solve this?
I tried the columnSpan css property without any success, can you please help me or show me example?
@radikris Thanks for the question!
If you are trying to add the colspan HTML attribute to the elements, you can add them in the Element Attributes section within the Style tab directly
If, however, you are purely interested in applying styling to the elements, there are definitely a few ways you could achieve this. If your app has a CSS library with associated classes, you can always just add the classes to the elements in the Advanced section at the bottom of the Style tab and it will pick up the stylings within your app.
Alternatively, you could use basic CSS to achieve this as well. You could use width percentages on the individual components, or you could set flex: 1 and flex: 2 on the small and large columns respectively. Depending on the styling you have throughout your app, I think there are multiple ways you could fit your exact spec…try playing around with the styling and let us know if you find something that works!
Hi @TimG !
I went with the old approach, custom code and the properties come from Builder:
It is working great for a while, and after that something strange happen:
Before:
After:
In the code it looks like this:
So I have this gridFlex property which I will get from Builder.
Sometimes this dynamic css content breaks in Builder.io and I have to go back to my code, fix the dynamic css (eg: remove grid.gridflex, and hardcode col-span-3, and delete it again, and write back this grid.gridFlex), and after that everything works again, look at the next photo, these are the same css after removing and added back and forth the dynamic css.
It’s pretty anoying to do this, and could not figure out what cause this issue, if I save a totally different thing in this file, for example reducing the Padding, it breaks. 
Can you please check this, would really appreciate it, because I have this in more places.
Hope I could clearly explain my problem.
Let me know!
@radikris do you have a link to either the page or a content page within Builder? It will be easier to troubleshoot looking at the same page as you are.
@radikris if I inspect the CSS file: https://barion-builderio.vercel.app/_next/static/css/fcdb43e63103f5eb.css
I see .col-span-X styling for most col-spans, but not for col-span-3…where is this CSS file coming from? If I add in the .col-span-3 styling then it works correctly.
I use tailwindcss in my project, and it gives the default col-spans, I did not override it anywhere, I don’t know why is it happening, I only extended my tailwind-config with some extra color, borderradius etc.
Can it happen that my tailwindconfig does not know all of this grid sizes?
I guess this will be the problem:
Hmm I am not sure… you could try re-installing tailwind CSS to your application, or manually inserting the col-span-3 styling in your tailwind or app CSS files.
Similarly, if you manually input the col-span CSS in the Custom JS+CSS window
.col-span-3 { grid-column: span 3 / span 3; }
It seems to resolve the issue. I know it is a bit of a workaround, but hopefully it is enough to get your page working in the meantime!
Yes I know, the problem was with this dynamic col-span-{gridFlex} thing, Tailwind in buildtime doesn’t know what values will I use, so he is trying to purge out unused variables, unused css classes to make the deployed css smaller.
I will leave this here, if someone later has the same issue:
If you are trying to use dynamic css, like : col-span-{n} where n is dynamic, tailwind would know not what can be there, so you have options:
Hope it was helpful!
Thank you @radikris, this is very helpful!
