Creación de Grillas Responsivas con CSS Grid y SASS

¿Qué es una grilla en el diseño web?

Una grilla es una herramienta esencial en el diseño de aplicaciones y páginas web. Se trata de un sistema de columnas que nosotros mismos creamos para organizar nuestros elementos y componentes de manera eficiente. En el ejemplo del proyecto mencionado, se utilizan 12 columnas para escritorio, 12 columnas para tablet y 4 columnas para dispositivos móviles, lo que facilita la estructuración y el diseño sin necesidad de dedicar demasiado tiempo a estilos personalizados.

¿Cómo configurar una grilla con CSS Grid?

La mejor herramienta para crear una grilla en CSS es Grid. En el proyecto, la configuración se realiza en un archivo denominado layout, donde se establecen los breakpoints para distintos dispositivos. Estos breakpoints son puntos de ajuste que permiten que un diseño se adapte a diferentes tamaños de pantalla:

• XS: 360 píxeles, equivalente a un iPhone 5 o dispositivos pequeños.
• S: 440 píxeles, similar a un Pixel 2.
• M: 768 píxeles, tamaño de un iPad.
• L: 1280 píxeles, común en dispositivos de escritorio.
• XL: 1440 píxeles, utilizado para dispositivos desktop de alta calidad.

¿Cómo usar SASS para facilitar el diseño?

Se recomienda utilizar SASS para crear un mixin que permita modificar los estilos según el breakpoint activo. SASS simplifica la gestión de estilos gracias a sus potentes características, como variables y mixins, que permiten modificar rápidamente el diseño sin complicaciones.

¿Cómo se definen las columnas y el espaciado entre ellas?

Para establecer el número de columnas y el espaciado entre ellas (column gap), se fijan variables según el tamaño del dispositivo:

• Móviles: 4 columnas con un espaciado del 6.67%.
• Tabletas: 12 columnas y un espaciado del 2.27%.
• Escritorios: 12 columnas con un distinto espaciado.

Estas configuraciones se ajustan a las necesidades del diseño y permiten una estructura precisa para los componentes.

.grid {
  display: grid;
  grid-column-gap: $grid-column-gap; 
  grid-template-columns: repeat($columns, 1fr);
}

¿Cómo definir clases para los contenedores?

Se crea una clase grid que se aplicará a los elementos contenedores. Esta clase centraliza los estilos y asegura que cada componente se alinee correctamente dentro de la grilla.

• Se puede añadir margen para separar de los bordes, dependiendo del diseño.
• display: grid se establece para activar la estructura de grilla configurada.

Ejemplo de ajuste de un componente usando CSS Grid

Con CSS Grid, ajustar cada componente se hace fácil y preciso. Aquí un ejemplo para definir las columnas ocupadas por un componente específico:

.producto {
  grid-column: 1 / 5; /* El componente empieza en la columna 1 y termina en la columna 5 */
}

Para hacer un elemento más grande o cambiar su posición, simplemente se modifican los valores de inicio y fin de las columnas.

¿Cómo gestionar el diseño adaptable a diferentes dispositivos?

Una de las ventajas del sistema de grillas es su capacidad de ajustar automáticamente los elementos según el tamaño de pantalla. Al cambiar el tamaño de la página, los componentes se adaptan y se mantienen organizados, evitando problemas de diseño.

Usar una extensión de navegador como Chrome Developer Tools permite visualizar cómo se alinean los elementos y cómo cambia la disposición al modificar el tamaño de la ventana del navegador.

Regularmente, sumergirse en la configuración CSS y ajustar detalles garantizan que el diseño sea adaptable y responsivo, proporcionando una experiencia consistente en todos los dispositivos.