Flexbox y Grid Layout:

¿Qué es Flexbox?

Flexbox, o Flexible Box Layout, es un modelo de diseño unidimensional que permite la creación de diseños flexibles y eficientes en una fila o columna. Es particularmente útil cuando se trabaja con elementos hijos de un contenedor y se busca un diseño que se adapte dinámicamente al tamaño de la pantalla o al contenido dentro de él.

Aquí hay un ejemplo de como se utiliza el css flexbox:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

En este ejemplo, display: flex; convierte el contenedor en un contenedor flexible, y justify-content y align-items controlan la distribución de los elementos hijos a lo largo del eje principal y secundario, respectivamente.

En el siguiente proyecto se puede ver un ejemplo de como podríamos implementar flexbox, para poder alinear las imágenes e incluso poder trabajar con las media queries para poder lograr unas imágenes mucho más responsivas a la hora de visualizarlas en diferentes pantallas, para no alargar demasiado este tema, en el siguiente enlace estará el proyecto completo donde podrán apreciar el código con algunos comentarios explicando los puntos importantes en flexbox:

Como se ve en las imágenes dependiendo del ancho de la pantalla es como se irán posicionando, en el primer caso es un ancho de 843 pixeles, en el segundo de 558 pixeles y en el tercero 335 pixeles.

https://github.com/karlacabanas01/flexbox

¿Y qué es Grid Layout?:

Por otro lado, Grid Layout es un sistema de diseño bidimensional que permite la creación de estructuras de cuadrícula. Este enfoque es ideal cuando se desea organizar elementos en filas y columnas, brindando un control preciso sobre la ubicación y el tamaño de los elementos dentro de la cuadrícula.

Ejemplo de Uso de Grid Layout:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 20px;
}

En este ejemplo, display: grid; establece el contenedor como un contenedor de cuadrícula, y grid-template-columns define las columnas de la cuadrícula con proporciones flexibles. grid-gap agrega espacio entre las celdas de la cuadrícula.

Pero, cual se adapta mejor a nuestros proyecto?

Si queremos ver cual usar o cual se adapta mejor a lo que nosotros requerimos podemos ver la siguiente tabla para darnos una idea:

¿Que es CSS Grid?

👩🏻‍💻 Conceptos Básicos de CSS Grid

CSS Grid es un sistema de diseño bidimensional que te permite controlar la disposición de los elementos tanto en filas como en columnas de manera precisa y flexible.

Para activar CSS Grid, simplemente establece display: grid en el contenedor que deseas convertir en un grid, Una vez activado el grid, puedes definir las columnas y filas utilizando grid-template-columns y grid-template-rows respectivamente. Estas propiedades te permiten especificar el tamaño y la cantidad de columnas y filas, por ejemplo:

.container {
  display: grid;
  grid-template-columns: 100px 200px auto;
  grid-template-rows: 50px 100px;
}

Colocando los elementos en el Grid

Se debe usar grid-column y grid-row para posicionar elementos en el grid.

Grid Lines: Entender que los elementos se pueden colocar y alinear usando líneas de grid numeradas o nombres.

.item {
  grid-column: 1 / 3;
  grid-row: 1;
}

Diseño Responsivo

Usa unidades fr (Unidades Fraccionales) para columnas y filas adaptables, emplea la función repeat() para simplificar la creación de múltiples columnas o filas, y utiliza media queries para ajustar el diseño a diferentes tamaños de pantalla.

.container {
  grid-template-columns: repeat(3, 1fr);
}

Alineación y Justificación

align-items, justify-items, align-content, y justify-content para alinear y justificar el contenido dentro del contenedor de grid y sus celdas.

.container {
  align-items: center;
  justify-items: center;
}

Áreas de Grid

Se usa grid-template-areas para crear un diseño basado en nombres de áreas, facilitando la colocación de elementos y para asignar elementos a áreas específicas se usa grid-area.

.container {
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
}
.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

👩🏻‍💻 Grids Avanzados

Subgrid

El concepto de subgrid es una extensión del grid regular que permite que los elementos hijos de un contenedor de grid utilicen las definiciones de fila y columna del grid padre. Esto es especialmente útil en situaciones donde necesitas alinear el contenido de un componente grid anidado directamente con el grid principal.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.item {
  display: grid;
  grid-template-columns: subgrid; /* Las columnas del hijo corresponden a las del padre */
}

Función minmax()

La función minmax() permite especificar el tamaño mínimo y máximo de las filas y columnas. Es particularmente útil para diseños responsivos, donde las dimensiones deben adaptarse a diferentes tamaños de pantalla, pero sin sobrepasar ciertos límites.

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
}

Espaciado entre elementos con gap

Anteriormente conocido como grid-gap, el gap (junto con row-gap y column-gap) permite definir el espacio entre filas y columnas, facilitando el diseño sin afectar el padding o los márgenes de los elementos individuales.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* Espacio entre filas y columnas */
}

auto-fill vs auto-fit

Estas dos funciones se utilizan con repeat() para controlar cómo se distribuyen las columnas o filas en un contenedor de grid cuando el tamaño del contenedor cambia.

• auto-fill llena el contenedor con tantas celdas del tamaño especificado como sea posible, incluso si están vacías.
• auto-fit colapsa las celdas vacías y expande las celdas restantes para ocupar el espacio disponible.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

Alineación avanzada y control de superposición

CSS Grid ofrece un control detallado sobre la alineación con justify-self, align-self, justify-items, align-items, entre otros. Además, puedes superponer elementos de manera controlada, colocándolos intencionalmente en las mismas celdas del grid.

.item1 {
  grid-column: 1 / 3;
  grid-row: 1;
}
.item2 {
  grid-column: 2 / 4;
  grid-row: 1;
}

Diseño basado en plantillas con grid-template-areas

Esta propiedad te permite crear un diseño basado en áreas nombradas, lo cual simplifica mucho el proceso de diseño, especialmente para diseños complejos.

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
}

.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

📱 Media Queries y Diseño Responsivo

Como lo mencionamos en el post anterior las media queries y el diseño responsivo en CSS son conceptos clave, que permiten crear sitios web que se adaptan a diferentes dispositivos y tamaños de pantalla.

Media Queries

Son una característica de CSS que permite aplicar estilos condicionales basados en las características del dispositivo o del medio en el que se está visualizando la página.

/* Estilos para pantallas con un ancho máximo de 600px */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Uso de Rangos y Operadores Lógicos

Las media queries no se limitan a puntos de corte fijos. Puedes utilizar rangos y operadores lógicos (and, not, only, or) para crear condiciones más específicas. Esto te permite afinar cómo y cuándo se aplican ciertos estilos. Por ejemplo:

@media (min-width: 600px) and (max-width: 900px) {
  body {
    background-color: blue;
  }
}

Combinar Media Features

Puedes combinar múltiples características en una sola media query para crear reglas muy específicas basadas en el color, la orientación y otros factores del dispositivo:

@media (min-width: 600px) and (orientation: landscape) and (prefers-color-scheme: dark) {
  body {
    background-color: darkblue;
  }
}

Media Queries y CSS Grid

Integrar media queries con CSS Grid permite a los desarrolladores rediseñar la disposición de los elementos de la página de manera más dinámica y adaptativa en función del tamaño del dispositivo. Por ejemplo, cambiar la cantidad de columnas en una cuadrícula basada en la anchura del viewport:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

@media (min-width: 800px) {
  .grid-container {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }
}

Optimización del Rendimiento con Media Queries

Las media queries pueden ser utilizadas para optimizar el rendimiento, cargando recursos sólo cuando es necesario. Por ejemplo, aplicar imágenes de fondo de alta resolución solo en pantallas grandes:

body {
  background-image: url('low-res.jpg');
}

@media (min-resolution: 2dppx) and (min-width: 1024px) {
  body {
    background-image: url('high-res.jpg');
  }
}

Mobile First

El enfoque Mobile First comienza el proceso de diseño por los dispositivos móviles y luego se expande hacia dispositivos más grandes como tablets y computadoras de escritorio. Este método es especialmente beneficioso para las aplicaciones web progresivas, donde la experiencia móvil es prioritaria debido a la alta tasa de dispositivos como son los celulares.

Beneficios del Mobile First:

• Priorización del contenido: Al diseñar para móviles primero, te ves obligado a centrarte en lo más esencial debido al espacio limitado, lo que mejora la experiencia del usuario al reducir la sobrecarga informativa.
• Mejora del rendimiento: Cargar sólo los recursos necesarios para dispositivos móviles puede reducir los tiempos de carga, crucial para mantener el compromiso del usuario en dispositivos con conexiones de red menos estables.
• SEO mejorado: Google prioriza el indexado móvil, por lo que un diseño optimizado para móviles puede contribuir a un mejor ranking en los resultados de búsqueda.

Desktop First

Desktop First toma el enfoque opuesto, comenzando con un diseño que se adapta a pantallas grandes y luego se ajusta para pantallas más pequeñas. Este enfoque puede ser ideal para aplicaciones complejas de negocios o plataformas de e-commerce con funcionalidades robustas que son inicialmente diseñadas para ser utilizadas en un entorno de escritorio.

Beneficios del Desktop First:

• Aprovechamiento de la funcionalidad: Permite a los diseñadores aprovechar al máximo las características de los dispositivos más poderosos desde el inicio.
• Flexibilidad en diseño: Más espacio en la pantalla facilita la incorporación de elementos visuales complejos y funcionalidades avanzadas.

Diseño Responsivo:

Se refiere a la práctica de diseñar y desarrollar sitios web de manera que se adapten de manera fluida a diferentes tamaños de pantalla y dispositivos.

• Se utiliza principalmente para garantizar una experiencia de usuario consistente y óptima, independientemente de si el usuario está utilizando un dispositivo con una pantalla grande, mediana o pequeña, como una computadora de escritorio, una tableta o un teléfono móvil.
• Para lograr un diseño responsivo, se suelen emplear media queries junto con unidades relativas (como porcentajes o unidades em), imágenes flexibles y otras técnicas CSS.
• Un ejemplo básico de diseño responsivo podría ser ajustar el tamaño de texto y cambiar el diseño de la página para adaptarse a pantallas más pequeñas, como se muestra en el siguiente código:

body {
  font-size: 16px;
}

@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

Conclusión

En el mundo del diseño web, comprender y saber cómo implementar Flexbox y Grid Layout junto con Media Queries es esencial para crear sitios que no solo se vean bien en cualquier dispositivo, sino que también funcionen de manera eficiente. Utilizar estrategias como Mobile First y Desktop First nos ayuda a asegurarnos de que nuestra web esté optimizada tanto para usuarios móviles como para aquellos en computadores de escritorio, adaptándose a sus necesidades específicas.

Estas herramientas son especialmente valiosas en áreas como las aplicaciones web progresivas y las plataformas de e-commerce, donde la experiencia del usuario puede variar mucho según el dispositivo utilizado. Por ejemplo, en una aplicación móvil, la rapidez es clave, mientras que en una tienda online, la facilidad de navegación toma mayor importancia.

🤯 ¡No te pierdas lo que viene!En el próximo post, vamos a sumergirnos en el emocionante mundo de las animaciones CSS, transformaciones, transiciones, pseudoclases y pseudoelementos. Vamos a explorar cómo estas herramientas avanzadas pueden darle vida y un toque especial a tus proyectos web, haciéndolos no solo más interactivos sino también visualmente impresionantes.

¿Listo para llevar tus habilidades de diseño web al siguiente nivel?

En Kranio, contamos con expertos en desarrollo y diseño web que te ayudarán a implementar soluciones eficientes utilizando Flexbox, Grid Layout y Media Queries, asegurando que tus sitios sean responsivos y estén optimizados para todos los dispositivos. Contáctanos y descubre cómo podemos impulsar la transformación digital de tu empresa.