Construir layouts complejos y responsivos ya no requiere cientos de líneas de código ni trucos con flotantes. Con propiedades modernas de CSS Grid y Flexbox, es posible crear diseños robustos que se adaptan a cualquier tamaño de pantalla utilizando apenas una o dos declaraciones. A continuación se explican cinco layouts prácticos que demuestran el poder de estas técnicas.
¿Cómo funciona el Twelve Span Grid con CSS Grid?
El Twelve Span Grid es un sistema de rejilla de doce columnas que se construye con la propiedad grid-template-columns combinada con la función repeat() [0:18]. El primer parámetro de repeat indica la cantidad de columnas deseadas y el segundo define el tamaño de cada una.
css
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
- Cada elemento hijo define en qué columna empieza y en cuál termina.
- Al estirar o contraer la ventana, el diseño permanece estable sin breakpoints intermedios.
- Se puede complementar con un Media Query para cambiar la distribución en dispositivos móviles [0:56].
Esta técnica elimina la dependencia de frameworks externos para obtener un grid de doce columnas, manteniéndolo nativo y ligero.
¿Qué es el layout RAM y cómo aprovecha autofit?
El layout RAM (Repeat, Auto, Minmax) utiliza grid-template-columns junto con el valor auto-fit y la función minmax() [1:12]. Con auto-fit, el navegador calcula automáticamente cuántas columnas caben en el espacio disponible y las estira para ocupar todo el ancho.
css
.ram {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
- El valor mínimo dentro de
minmax() establece el ancho más pequeño que puede tener cada columna.
- Cuando la pantalla se contrae hasta ese mínimo, se genera una grid implícita y los elementos saltan a una nueva fila [1:36].
- No se necesitan breakpoints adicionales: el propio CSS se encarga de la redistribución.
¿Por qué Justify Content Space Between resuelve el layout lineup?
El layout Lineup se apoya en justify-content: space-between, una propiedad familiar tanto en Flexbox como en CSS Grid [1:48]. Dentro de un contenedor grid, las cards se distribuyen con un espaciado uniforme entre ellas.
- Al estirar o contraer la ventana, el espacio entre elementos se mantiene consistente.
- Internamente, cada card puede usar Flexbox para organizar su propio contenido [2:04].
- Aunque una card tenga más contenido que otra, las tres conservan la misma altura, algo que antes requería trucos con flotantes o columnas falsas [2:22].
¿Qué hace la función Clamp en diseños responsivos?
El layout denominado clamping my style permite definir un ancho que no cambia al redimensionar la pantalla [2:46]. Esto se logra con la función clamp(), que recibe tres valores: un mínimo, un valor ideal y un máximo.
css
.card {
width: clamp(200px, 50%, 600px);
}
- La card nunca será más angosta que el valor mínimo ni más ancha que el máximo.
- Es fundamental verificar la compatibilidad del navegador en herramientas como Can I Use antes de utilizarla en producción [3:04].
¿Cómo mantener la proporción de imágenes con Aspect Ratio?
El layout Respect for Aspect aborda un problema frecuente: que las imágenes y videos se deformen al cambiar el tamaño de la pantalla [3:22]. La propiedad aspect-ratio de CSS permite fijar una relación de aspecto específica.
css
img {
aspect-ratio: 16 / 9;
object-fit: cover;
}
- La relación más habitual en la web es 16:9, es decir, por cada dieciséis píxeles horizontales hay nueve verticales [3:32].
- También se pueden usar relaciones como 5:3 o cualquier otra que el diseño requiera.
- Antes de implementarla, conviene comprobar si la propiedad se encuentra en etapa experimental o ya es apta para producción [3:58].
Estos cinco layouts están inspirados en el trabajo de Una Kravets, quien popularizó el concepto de ten single line CSS layouts [4:08]. Su material incluye tanto una charla en video como documentación escrita que detalla cada técnica paso a paso.
Si conoces otra forma de lograr el efecto de clamp sin usar esa función, compártelo en los comentarios.
