Etiquetas

Responsive Design

9 artículos

Cuadrícula de maquetación CSS que muestra puntos de ruptura de container queries adaptando componentes al tamaño de su contenedor

Maquetación CSS moderna: container queries y subgrid

Guía práctica de diseños responsivos con container queries y subgrid: respuesta por componente, herencia de alineación, cuadrículas y paneles.

10 mar 2025·5 min de lectura

Comparación lado a lado del mismo componente de tarjeta renderizado pequeño en una barra lateral y grande en un área de contenido principal usando container queries

Frontend

Container Queries: componentes que se adaptan a su contenedor

Crea componentes responsivos con container queries que se adaptan a su contenedor y no al viewport: el mismo layout sirve en barras laterales y modales.

3 ago 2024·5 min de lectura

Diagrama de un layout complejo de CSS Grid que muestra áreas de grid superpuestas, alineación con subgrid, áreas de plantilla con nombre y reordenamiento responsive en distintos breakpoints

Frontend

Patrones avanzados de CSS Grid para layouts complejos

CSS Grid avanzado en producción: subgrid, áreas con nombre, reordenamiento responsive, colocación automática, minmax y componentes conscientes del grid.

21 dic 2023·5 min de lectura

Comparación de media queries que apuntan al ancho del viewport frente a container queries que apuntan al ancho del elemento padre para el diseño de componentes responsivos

Frontend

Módulos de UI portables con container queries de CSS

Cómo las container queries permiten crear componentes que se adaptan al tamaño de su padre y no al viewport: módulos de UI portables a cualquier layout.

21 oct 2023·5 min de lectura

Muestra visual de patrones de diseño CSS, incluyendo holy grail, barra lateral, masonry y cuadrículas de tarjetas responsivas

Frontend

Patrones modernos de diseño CSS que todo desarrollador debería conocer

Patrones prácticos de maquetación con Grid, Flexbox, container queries y propiedades lógicas que resuelven el diseño responsivo sin JavaScript.

24 may 2023·4 min de lectura

Comparación de antes y después que muestra la reducción del tamaño del archivo de imagen de 2 MB a 40 KB conservando la calidad visual

Frontend

Optimización de imágenes para el rendimiento web

Guía práctica de optimización de imágenes para la web: formatos modernos, imágenes responsivas, carga diferida, CDN y su impacto en Core Web Vitals.

8 dic 2021·5 min de lectura

Comparación lado a lado de un componente de tarjeta que adapta su diseño según el ancho del contenedor

Frontend

CSS Container Queries: componentes responsivos sin media queries

Cómo las container queries permiten que los componentes respondan al tamaño de su contenedor en lugar del viewport, para piezas reutilizables de verdad.

19 may 2021·5 min de lectura

Comparación de diseño responsivo que muestra el mismo componente en distintos anchos de viewport

Frontend

Diseño responsivo moderno: más allá de las media queries

Container queries, tipografía fluida, dimensionado intrínseco y clamp(): técnicas modernas que reducen las media queries y dan layouts flexibles.

19 oct 2020·3 min de lectura

Visualización de un layout con CSS Grid mostrando filas, columnas y áreas de grid

Frontend

CSS Grid Layout: Guía práctica para dominarlo

CSS Grid permite layouts bidimensionales antes imposibles sin hacks: el modelo de grid, las reglas de posicionamiento y los patrones que sustituyen floats.

7 oct 2020·3 min de lectura

Ver todos los artículos