CSS-Grid: Extend rows to touch grid-container/viewport on both sides

[zerobyte]

Hello All,

I am trying to have my site where the header, nav, page-title touch the sides with no gaps on either side nor should they have any margins between them. After these three rows I want to have a panel which contains tabs which open different parts all having a side and bottom gutter. After which there is margin and then follows the secondary nav, a margin and then the footer etc. Please see a sample: https://caydees.com/Gentabs/Eurospots.php#ity

I tried to achieve this with: https://codepen.io/buzz1/pen/RZZjYB?editors=1000

Perhaps you can help to achieve this.

Many thanks,

zerobyte

[Paulie_D]

There’s no need to do all of this in one container.

You really only need the grid on the tabs panel…so you can make that a sub-grid.

The point is to only use Grid when you have to. If you want a 100% wide div…you don’t need Grid.

[Author]

Posts