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

Selectores y propiedades CSS aplicados a web responsive

Descubre cómo crear diseños web responsivos de dos columnas utilizando CSS Grid. Aprende a distribuir el espacio de manera flexible y adaptable a diferentes tamaños de pantalla con grid-template-columns y gap. Compara la diferencia entre Flexbox y Grid y elige la mejor opción para tus proyectos. Crea layouts más estructurados y flexibles que se ajusten a cualquier dispositivo.

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