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.
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.
Creación de Grillas Responsivas con CSS Grid y SASS
Creación de Grillas Responsivas con CSS Grid y SASS
Recursos
Resumen
¿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.
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.
LAYOUT Y SISTEMA DE GRILLAS.
¿Qué es una grilla?
Es un sistema de columnas creado por nosotros de acuerdo a las necesidades para ajustar nuestros elementos y componentes.
La mejor herramienta de CSS para crear una grilla es Grid.
Sass es un pre-procesador de CSS te ayuda a escribir CSS de una manera más rápida y más fácil.
Mixin es una clase que tiene dentro del pre-procesador, que te ayuda a manejar mejor los Breakpoints.
Tenemos que configurar nuestros BreakPoints (Tipos de pantalla).
• $xs: 360px. Para móviles pequeños.
• $s: 440px. Para móviles con la pantalla más grande.
• $m: 768px. Para tablets.
• $l: 1280px. Para Ordenadores pantalla normal.
• $xl: 1440px. Monitores de alta calidad.
Podemos usar un Mixin para manejar los distintos breakpoints más fácilmente.
Después vamos a configurar nuestras variables dependiendo de los breakpoints.
--columns. Es el número de columnas que vamos a poner.
--column-gap es el espacio entre las columnas.
Creamos después una clase Grid para configurar cada uno de los elementos contenedores donde vamos a incluir nuestros componentes.
Finalmente le añadimos un display grid, que nos permite que toda esta configuración surta efecto. Y definimos un grip-column-gap para la distancia entre columnas y un grid-template-column que nos permite tener esta estructura.
Para definir el tamaño de un componente, se pone grid-column: 1/5, donde uno es la columna donde empieza, y 5 es la columna donde termina.
Tamaños de pantalla...
XS --> 360px --> Equivale a un iphone5
S --> 440px --> Equivale a un Pixel 2.
M --> 768px --> Equivale a un Ipad.
L --> 1280px --> Equivale a desktop.
XL --> 1440px --> Equivale a pantallas desktop de alta calidad.
Estos tamaños tambien se pueden consultar el la documentacion de Bootstrap.
Para aquellos que se pregunten porque se usa una cuadricula de 12 columnas, la razón es que el 12 es el mínimo común múltiplo optimo por englobar la mayor cantidad de números sin ser excesivamente grande.
De esta forma se pueden crear 2, 3, 4, 6 ó 12 columnas del mismo tamaño sin recurrir a fracciones.
Dato
Puedes ver el grid con el inspector de elementos.
Para acceder al inspector de elementos solo debes presionar "Ctrl + Shift + i" o dar click derecho y después a la opción de "Inspect". Por defecto te mostrará la sección de "Styles" solo tienes que dirigirte a "Layout" y marcas los grid que deseas ver.
