Understanding grid-template

Community Usage questions
1

Could someone please explain grid-templates in o-s-c. I'm confused why this:

image
image908×140 3.12 KB

results in this:

image
image946×445 19.4 KB

4

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

5

Can you post a working example?

6

sorry i don't have one, i fiddled with the mdn docs examples (just copy it from there as starting point?)

7

Hi,

I don't know if it can help but try this

image
image1420×761 37.4 KB

then use grid-area into your component to set the "link"

image

grid-template.json (5.4 KB)

Cheers

3 Likes
8

That's what I was looking for! Much appreciated.

9

You're welcome !
a good ressource about Css Grid : A Complete Guide to Grid | CSS-Tricks

10

I notice that the dynamic property of the gridTemplate is false

image

I'm experimenting with layouts and I have 3 panels

image
image1147×603 14.7 KB

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)

11

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.

12

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)