Un lector escribió preguntando específicamente cómo construir este diseño en CSS Flexbox:
Mi respuesta: ese no es realmente un diseño para CSS Flexbox. Podría lograrlo si fuera necesario, pero necesitaría algún tipo de presunción, como agrupar la navegación y el artículo en un elemento principal (si no más agrupamiento). CSS Grid nació para describir este tipo de diseño y será mucho más fácil trabajar con él, sin mencionar que el soporte del navegador para ambos es prácticamente el mismo en estos días.
¿Qué quieres decir con “Santo Grial”?
Miren, niños, el diseño en la web solía ser tan disparatado que el increíble diagrama simple de arriba era relativamente difícil de lograr, particularmente si necesitaban que las “columnas” allí 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 hacia trucos más limpios (como imágenes de fondo que imitaban columnas). Las técnicas que lograron llevarlo a cabo se refirieron a él como el santo grial. (Solo para mayor claridad, por lo general, santo grial significaba un diseño de tres columnas con contenido en el medio, pero el punto principal eran columnas de igual altura).
CSS es mucho más robusto ahora, por lo que podemos usarlo sin recurrir a hacks para hacer cosas razonables, como lograr este diseño básico.
Aquí está en CSS Grid
Esta cuadrícula está configurada tanto con grid-template-columns y grid-template-rows. De esta manera, podemos ser realmente específicos sobre dónde queremos que se ubiquen estas secciones principales del sitio.
Me resbalé en algunas cosas extra
- El otro día se me ocurrió otra pregunta sobre cómo hacer líneas de 1px entre áreas de la 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 bajen a un diseño de una sola columna. Lo hice en una consulta de medios anterior. A veces uso
display: block;en el padre, apagando la red, pero aquí lo dejégridy restablezca las columnas y filas. De esta manera, todavía tenemos la brecha y podemos mezclar las cosas si es necesario. - Otra pregunta reciente sobre la que me preguntaron es el efecto sutil de “borde del cuerpo” que puede ver en la demostración anterior. Lo hice de la manera 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 para la cuadrícula. De esa manera, las cosas de terceros que inyectan cosas en el cuerpo no causarán extrañeza en el diseño.
Artículo
el 18 de febrero de 2017
Cuadrícula CSS: un diseño, múltiples formas
Retazo
el 13 de diciembre de 2019
Diseños de inicio de cuadrícula CSS