Extienda el color de fondo a lo ancho de la ventana

Estoy tratando de construir una barra de navegación receptiva con un diseño de cuadrícula CSS que se extienda a lo largo del ancho de la ventana gráfica, pero los elementos internos deben estar centrados y alineados con otros elementos contenedores en la página.

El resultado que quiero se muestra en el código de abajo, sin embargo, no creo que esta sea una solución elegante, ya que usé 2 elementos separados

astackdos uno encima del otro.

Uno

es para centrar los elementos y el segundo

es para cubrir el background-color todo el ancho de la ventana gráfica.


¿Hay una mejor manera de hacerlo usando el diseño de cuadrícula de CSS ?

[EDITAR] Estoy buscando una manera de hacer que la técnica sea reutilizable en múltiples elementos.


Expanda el fragmento de código a la página completa para que el diseño aparezca correctamente.

 .container { display: grid; grid-template-columns: 1fr repeat(4, minmax(min-content, 150px)) 1fr; border: 2px solid black; height: 100vh; } .nav { grid-area: 1 / 2 / 1 / span 4; height: 50px; background-color: grey; border: 1px solid red; position: relative; } .nav-underlay { background-color: grey; grid-area: 1 / 1 / 1 / span 7; height: 50px; } .content { grid-area: 2 / 2 / 2 / span 4; height: 200px; background-color: grey; border: 1px solid red; } 
    
Content box

Dado que el área de fondo que está buscando expandir es solo para fines decorativos (es decir, no está utilizando esa área para transmitir contenido), entonces puede usar pseudo-elementos CSS en lugar de un elemento HTML real.

Los pseudo-elementos se convierten en elementos de cuadrícula cuando se aplican a un contenedor de cuadrícula ( leer más ).

 .container { display: grid; grid-template-columns: 1fr repeat(4, minmax(min-content, 150px)) 1fr; border: 2px solid black; height: 100vh; } .nav { grid-area: 1 / 2 / 2 / span 4; height: 50px; background-color: grey; border: 1px solid red; position: relative; } .container::before { grid-area: 1 / 1 / 2 / 2; content: ""; background-color: grey; height: 50px; } .container::after { grid-area: 1 / -1 / 2 / -2; background-color: grey; height: 50px; content: ""; } .content { grid-area: 2 / 2 / 2 / span 4; height: 200px; background-color: grey; border: 1px solid red; } 
   
Content box