Componentes de banderas a prueba de balas

Un uso inteligente de la cuadrícula CSS de Jay Freestone para lograr una variación particular del patrón de diseño de objetos multimedia (donde la imagen está centrada con el título) sin números mágicos, nada que no sea flexible y resistente.

El truco consiste en utilizar una fila “extra” encima y debajo del título:

La imagen va en las primeras tres filas de la primera columna y el contenido va en las últimas tres filas de la segunda columna utilizando áreas de cuadrícula con nombre :

grid-template-areas:  'signifier .'  'signifier content'  'signifier content'  '.         content';

Lea la publicación de Jay para conocer un poco más de trucos necesarios para hacerlo completamente resistente.

Me encanta el tipo de publicación que se centra en el modelo mental detrás de la cuadrícula CSS como esta. Es como… ¿cómo puedo dividir este diseño con columnas y filas arbitrarias, sabiendo que puedo colocar cosas en combinaciones rectangulares arbitrarias de celdas con cualquier tipo de alineación, para adaptarse mejor a este diseño?