Kevin Powell - Community•2w ago

Using only areas template areas with z index

Good day
Please how can I using grid template areas with z index

8 Replies

DanielOP•2w ago

Please forget about the three box and fourth box how can I archive that will only grid template areas

DanielOP•2w ago

https://codepen.io/George-Daniel-01/pen/qEWmKEr

George-Daniel-01

CodePen

Offset grid example

...

DanielOP•2w ago

Plz 🙏 🙏

MarkBoots•2w ago

almost certain that you can not do it with grid-template-area's but you can use the grid-template-columns and grid-template-rows where you define the gridlines

grid-template-columns: 
    [one-start] auto [two-start] auto [one-end] auto [two-end];
grid-template-rows:
    [one-start] 
    auto
    [two-start]
    auto
    [one-end]
    auto
    [two-end];

grid-template-columns: 
    [one-start] auto [two-start] auto [one-end] auto [two-end];
grid-template-rows:
    [one-start] 
    auto
    [two-start]
    auto
    [one-end]
    auto
    [two-end];

DanielOP•2w ago

Thanks

clevermissfox•2w ago

Chris has figured out a way to overlap with grid ares. If I remember correctly it's by giving the start and end a different area name.

css 
Grid-template-areas:
 ' col1row1 col2row1 col3row1'
 'col1row2 col2row2 col3row2'
 'col1row3 col2row3 col3row3' ;

.item1 {
 grid-column:  1 /  span 2 ;
 grid-row: col1row1 / col2row2;
}

.item2 {
  grid-column:  2 /  span 2 ;
 grid-row: col2row2 / col3row3
}

css 
Grid-template-areas:
 ' col1row1 col2row1 col3row1'
 'col1row2 col2row2 col3row2'
 'col1row3 col2row3 col3row3' ;

.item1 {
 grid-column:  1 /  span 2 ;
 grid-row: col1row1 / col2row2;
}

.item2 {
  grid-column:  2 /  span 2 ;
 grid-row: col2row2 / col3row3
}

I'm on mobile or would test a codepen, the workaround is something similar to this though I personally prefer named grid-lines but since grid template areas was specifically inquired about...

Chris Bolson•2w ago

As @clevermissfox has mentioned, it is possible with grid areas. Here is a demo based on your image. At the end of the day grid areas and grid lines are basically the same thing so just use which ever method is simpler to use in each use case.

Chris Bolson

CodePen

https://discord.com/channels/436251713830125568/1330190898990153748

...

DanielOP•2w ago

Thanks

Gaming

Programming

Using only areas template areas with z index

Did you find this page helpful?