Elementos de ancho completo mediante el uso de una cuadrícula de borde a borde

Si tiene un contenedor de ancho limitado, digamos una columna de texto centrada, “separarse” de eso para crear un elemento de ancho completo implica un truco. Quizás el mejor truco sea el que tiene un posicionamiento relativo izquierdo y un margen izquierdo negativo basado en la ventana gráfica. Si bien tiene sus salvedades (por ejemplo, requiere un desbordamiento oculto en el cuerpo, el contenedor debe estar centrado, etc.), al menos es fácil de realizar y todo lo demás en el contenedor sigue felizmente con su trabajo.

Ha habido bastantes publicaciones sobre otra forma de hacer esto, involucrando la cuadrícula CSS:

• “Rompiendo con el diseño de cuadrícula CSS” de Tyler , al que Rachel respondió en una publicación propia .
• Rachel cubrió estos elementos de ancho completo en otra publicación, “Patrones de diseño editorial con cuadrícula CSS y columnas con nombre”.
• “Configurar el cuadro en el contenedor a todo el ancho con CSS Grid” de Selen Gora
• “Utilice CSS Subgrid para diseñar franjas de contenido de ancho completo en una plantilla de artículo” de Bryan Robinson

Lo único que todos estos tienen en común es que presuponen que tienes una cuadrícula de borde a borde . Seguí pensando: “¿La gente realmente usa la cuadrícula CSS para todo el diseño de la página?” Como, esencialmente body { display: grid; }¹ ? Los artículos en sí tienden a utilizar un nombre de clase, pero se supone que ese padre es un contenedor que ocupa todo el ancho del navegador.

Pregunté un poco por ahí y hubo algunos murmullos de ” sí, totalmente hago eso “. Genial, es algo que hace la gente. Lo primero que pensé fue que eso parece un dolor de cabeza por varias razones:

1. Un “encabezado” y un “pie de página” típicos son de ancho completo, por lo que tener que colocarlos explícitamente en la cuadrícula y estirarlos sobre el número correcto de columnas y mantenerlos actualizados mientras juegas con las columnas parece mucho trabajo. en comparación con tener el encabezado simplemente a nivel de bloque headerubicado en la parte superior (o inferior) del sitio. Aún puedes tener una cuadrícula de borde a borde en el medio y elementos a nivel de bloque arriba y abajo.
2. Tener que colocar explícitamente todos los elementos de un “artículo” en una columna central (por ejemplo, article * { grid-columns: 2 / 3; }solo para poder “estirar” ocasionalmente algo al abarcar más columnas me parece extraño. Por ejemplo, si el 95% del contenido se encuentra en una columna centrada, algo se siente más sólido y relajado al simplemente colocar ese contenido en un elemento principal que maneja el diseño, en lugar de que cada elemento individual tenga que ubicarse en la cuadrícula y el resultado final es que parece como si todo estuviera en un elemento principal compartido. .

No necesariamente odio la técnica, solo noto que de alguna manera me hace sentir raro. Pero probablemente sea sólo viejo.

1. Recomiendo no utilizar nunca display: grid;directamente sobre el bodyelemento. Un problema común: las extensiones del navegador pueden colocar cosas en el DOM dentro del cuerpo, que luego se colocarían en su cuadrícula y podrían arruinar su diseño. Lo he visto suceder. Yo diría que es como la mejor práctica de React no vincular todo el cuerpo, sino usar un div secundario que es efectivamente lo mismo de todos modos, solo que tiene como alcance un selector.