Diseño Web responsivo - Uso de Grid


Selectores y propiedades CSS aplicados a web responsive

Los scripts de estos ejemplos se encuentran en el Capítulo 9 del Libro 1 del Instructivo Programando Paso a Paso y Más

Los libros están a la venta en Amazon

Mi Sitio Web de dos columnas

Aprende a crear diseños web responsivos y flexibles utilizando CSS Grid. Descubre cómo aplicar selectores y propiedades para diseñar sitios web de dos columnas con main y aside. ¡Perfecto para principiantes y diseñadores intermedios. ¡Inicia tu viaje hacia el dominio del desarrollo web hoy mismo!

Los scripts de estos ejemplos se encuentran en el Capítulo 9 del Libro 1 del Instructivo Programando Paso a Paso y Más

Los libros están a la venta en Amazon

En este ejemplo utilizamos flex en el contenedor .container para crear una disposición de dos columnas.
flex: 1 en main y aside asegura que ambos elementos se expandan proporcionalmente.
min-width en main y aside asegura que mantengan un ancho mínimo adecuado.
El @media query cambia el diseño a una sola columna en dispositivos con un ancho máximo de 768px.
Esta division final abarca las dos columnas y se coloca en posición vertical en pantallas pequeñas