Could someone please explain grid-templates in o-s-c. I'm confused why this:
results in this:
Oh i was not aware that things like this are possible now.
I am not sure if i can help, i have never done something like this.
But according to the mdn docs..
"a a a" x px // define header size from top to bottom (left to right)
in row two and three:
"b b c" x px //nav will take more space
"b b c" x px
"b c c" x px //main will take more space
"b c c" x px
Header needs to be "a a a" otherwise it will mess it up
not sure if that helps, i don't fully understand that either
Can you post a working example?
sorry i don't have one, i fiddled with the mdn docs examples (just copy it from there as starting point?)
Hi,
I don't know if it can help but try this
then use grid-area into your component to set the "link"
grid-template.json (5.4 KB)
Cheers
3 Likes
That's what I was looking for! Much appreciated.
You're welcome !
a good ressource about Css Grid : A Complete Guide to Grid | CSS-Tricks
I notice that the dynamic property of the gridTemplate is false
I'm experimenting with layouts and I have 3 panels
If I hide the bottom panel, I'd like the others to occupy the space taken by the bottom panel. Same if just the left panel is showing, it could occupy the entire parent panel.
I wondered about using a variable in the gridTemplate, but I don't think that will work as it's not updated dynamically. I guess that also rules out VAR{gridTemplate, ...} as an option.
Is there a way to adjust the gridTemplate dynamically? Could this be implemented?
How do others dynamically adjust their panels/layouts?
Here is the session in case anyone would like to collaborate / experiment / learn together / offer insight and thoughts.
Panel Containers.json (14.8 KB)
Non-dynamic properties can be changed dynamically with some limitations (Advanced syntaxes - Open Stage Control).
Is there a way to adjust the gridTemplate dynamically? Could this be implemented?
Probably, I'll look into that.
Thx for this thread, help me to dive into css grid.
here is an example with column and customs css widget value and label, hope that help someone somedays
grid-test.json (23.5 KB)