El diseño del Santo Grial con CSS Grid

Un lector escribió preguntando específicamente cómo crear este diseño en CSS Flexbox:

Mi respuesta: Ese no es realmente un diseño para CSS Flexbox . Podrías lograrlo si fuera necesario, pero necesitarías algún tipo de presunción, como agrupar la navegación y el artículo en un elemento principal (si no más agrupaciones). CSS Grid nació para describir este tipo de diseño y será mucho más fácil trabajar con él, sin mencionar que la compatibilidad del navegador para ambos es prácticamente la misma en estos días.

¿Qué quieres decir con “Santo Grial”?

Miren, niños, el diseño en la web solía ser tan chiflado que el increíble y simple diagrama anterior era relativamente difícil de realizar, especialmente si necesitaban que las “columnas” coincidieran con las alturas. Lo sé, ridículo, pero ese era el trato. Usamos trucos súper extraños para hacerlo (como enormes márgenes negativos combinados con relleno positivo), que evolucionaron con el tiempo hasta convertirse en trucos más limpios (como imágenes de fondo que imitaban columnas ). Las técnicas que lograron lograrlo se referían a él como el santo grial . (Solo para mayor claridad, por lo general , el santo grial significaba un diseño de tres columnas con contenido en el medio, pero el punto principal eran las columnas de igual altura).

CSS es mucho más robusto ahora, por lo que podemos usarlo sin recurrir a trucos para hacer cosas razonables, como lograr este diseño básico.

Aquí está en CSS Grid

Esta cuadrícula está configurada con grid-template-columnsy grid-template-rows. De esta manera podemos ser realmente específicos acerca de dónde queremos que queden estas secciones principales del sitio.

Metí algunas cosas extra

• El otro día me surgió otra pregunta sobre cómo hacer líneas de 1 px entre áreas de cuadrícula. El truco es tan simple como que el padre tenga un color de fondo y use gap: 1px;, así que lo hice en la demostración anterior.
• Es probable que las pantallas pequeñas pasen a tener un diseño de una sola columna. Lo hice en una consulta de medios anterior. A veces lo uso display: block;en el padre, apagando la cuadrícula, pero aquí lo dejé gridactivado y restablecí las columnas y filas. De esta manera, todavía tenemos la brecha y podemos barajar las cosas si es necesario.
• Otra pregunta reciente sobre la que me hicieron es el sutil efecto de “borde corporal” que puedes ver en la demostración anterior. Lo hice lo más simple posible, con una pizca de relleno entre el cuerpo y la envoltura de la rejilla. Originalmente lo hice entre el cuerpo y el elemento HTML, pero para las cuadrículas de página completa, creo que es más inteligente usar un div contenedor que usar el cuerpo de la cuadrícula. De esa manera, las cosas de terceros que inyectan cosas en el cuerpo no causarán anomalías en el diseño.

CSS Grid: un diseño, múltiples formas

Santo Grial de la red Geoff Graham

Diseños iniciales de cuadrícula CSS

Santo Grial de la red Geoff Graham