Cómo utilizar Grid Layout con Tailwind CSS
Cuanto más pasan los años y las demandas se hacen más largas, más tiende el programador a buscar tecnologías que le ayuden a conseguir más haciendo menos. Así surgieron varios frameworks y librerías como React, Vue, Angular y la que cubriremos en este artículo: Tailwind CSS.
Hoy construiremos un proyecto que aplica el concepto CSS Grid Layout a este framework, repasando los conceptos principales necesarios para su implementación. Así que quédate aquí conmigo, ¡esta conversación tiene mucho que ofrecernos!
¿Qué es Tailwind CSS?
Tailwind es un framework creado con el objetivo de optimizar el uso de CSS. En lugar de que la estilización la hagan classes creadas manualmente por el programador (donde sus atributos se definen en un archivo importado con extensión .css), este framework proporciona un conjunto de clases diseñadas en el modelo atomic CSS, donde cada clase tiene una única función, como aplicar el color rojo al fondo de un elemento o transformar el texto en cursiva. Este conjunto completo de clases se puede encontrar en la documentación de Tailwind CSS e, incluso si ninguno de ellos satisface tus necesidades, ¡también puedes crear uno nuevo que sí lo haga!
Centrado en el desarrollo mobile first, todo el proceso de diseño se acelera y optimiza con Tailwind CSS que, además de ser intuitivo, tiene documentación fácil de aprender y rápida de buscar: simplemente ingresa el nombre del atributo (como como object-fit , margin o display) que proporciona el nombre de la clase que satisface la demanda y cómo utilizarla.
¿Qué es Grid?
El concepto CSS Grid Layout (o simplemente Grid para aquéllos más acostumbrados) implica la organización de una cierta cantidad de elementos en filas y columnas, formando una cuadrícula en la que estos elementos están cuidadosamente estructurados. Utilizando Grid es posible definir dimensiones para estas filas y columnas, además de posicionar diferentes elementos en función de ambas, brindando al programador un universo de posibilidades.
Consejos para utilizar Tailwind CSS
Hay varias formas de instalar Tailwind CSS en tu proyecto, según la tecnología que utilices. En la documentación de este framework existe una guía práctica para cada escenario donde se puede utilizar. ¡Simplemente sigue el paso a paso específico que se adapte a tu situación y sé feliz!
Sin embargo, no te preocupes, ya que todo el conocimiento compartido aquí se puede aplicar en cualquier otro escenario en el que se pueda utilizar Tailwind CSS. Por lo tanto, no te sorprendas si el nombre de la propiedad de clase en un elemento es className en lugar de class: ambos tienen el mismo objetivo, pero en React, por convención, se usa el primero. Dicho esto, ¿seguimos adelante?
Primeros pasos
Para entender asertivamente cómo crear y organizar un Grid, creemos un proyecto simple y sin mucha complejidad: un container principal que posee otros seis containers dentro de él, donde cada uno posee una imagen.
En el container principal (línea 6 de la figura 3), utilizamos el siguiente conjunto de clases para la estilización:
- Bg-black: Clase que define el color del background de la página como negro;
- W-full: Fija el ancho del container al 100 % del tamaño disponible;
- H-screen: Define la altura del container al 100 % de la altura del viewport (o sea, 100 % de la pantalla disponible para visualización).
En las imágenes creadas utilizamos las siguientes clases de Tailwind:
- W-full: Fija el ancho del container al 100 % del tamaño disponible;
- H-full: Fija la altura del container al 100 % disponible;
- Object-cover: Evita que la imagen se deforme, redimensionándola, manteniendo su proporción y recortando parte de ella cuando sus dimensiones no sean iguales al tamaño disponible.
Nota que en los containers internos (líneas 7, 10, 13, 16, 19 y 22 de la figura 3) aún no hemos insertado ninguna clase. Esto se debe a que comenzaremos a utilizar las clases propias de Grid en ellos.
Creando líneas y columnas
En primer lugar, para que podamos aprovechar todo lo que está por venir, el container principal necesita tener la clase grid. Esto, combinado con las otras clases que están por venir, hace que suceda toda la magia.
Imaginemos que queremos construir un layout que estará dividido en un cuadro con dos columnas y tres líneas. Para definir que tendremos dos columnas en el Grid, utilizamos una clase (o conjunto de clases, considerando que no siempre utilizaremos solo dos columnas) llamada grid-cols-2. Para crear tres filas, usaremos la clase grid-rows-3. Estos números utilizados para ambas clases, por supuesto, se pueden aumentar o disminuir según la demanda de la aplicación, pero siempre con la misma estructura: grid-(cols o rows)-n, donde n es la cantidad deseada para la fila o columna.
Por capricho, también se agregaron las siguientes clases al container principal:
- Gap-4: Crea un espacio exterior de 16 px entre los elementos del container principal;
- P-4: Define un espaciado interno para el container principal con el mismo valor referido (16 px).
Definiendo el tamaño ocupado por un elemento de Grid
Utilizando las clases grid, grid-cols-n y grid-rows-n (donde, repito, n es el número de líneas o columnas deseadas) ya somos capaces de hacer mucho dentro del concepto Grid. Sin embargo, esto no siempre es suficiente: para definir el tamaño de un solo elemento dentro del grado específico, por ejemplo, no podríamos hacerlo solo con estas clases.
Imagina que quisieras que el primero y el quinto elementos de Grid ocuparan dos líneas en lugar de solo una, como en el caso de las demás. Para ello, es necesario utilizar la clase row-span-n, donde n es el número de filas que queremos que ocupe el elemento (en nuestro caso sería row-span-2). De la misma forma, podemos definir cuántas columnas debe ocupar cada elemento con la clase cols-span-n.
Estamos logrando avances considerables, pero todavía algo anda mal. Está claro que la proporcionalidad se ha desperdiciado y las imágenes no se están distribuyendo en el tamaño equivalente o esperado, ¿no crees?
Esto sucede porque, si te paras a analizar el container principal, definimos que el Grid solo tendría tres líneas. Sin embargo, la forma en que configuramos cada elemento es como si tuviera cuatro. Simplemente haz esta pequeña corrección: cambia el número de columnas de tres a cuatro en el container principal) y todo quedará según lo esperado.
Es importante señalar que el número de clases es 15 para definir columnas y 7 para definir filas. Esto significa que, usando las clases que proporciona Tailwind CSS, solo podemos usar 15 columnas y 6 filas en un Grid determinado. Sin embargo, es posible crear nuevas clases, como se mencionó al principio de este artículo mientras hablábamos un poco sobre Tailwind CSS.
Si utilizaste el CDN para la instalación, debes ingresar el script de la figura 12 en el head de tu documento HTML. Para casos donde se creó un archivo tailwind.config.js en tu proyecto durante la instalación, añade los objetos gridTemplateColumns y gridTemplateRows dentro de extend:
Esta regla se aplica a cualquier número requerido de filas o columnas que excedan el límite de Tailwind. Simplemente cambia el número que ingresamos y ¡listo! Hecho.
Consideraciones finales
Entonces, ¿te resultó fácil usar Grid con Tailwind CSS? Personalmente, lo encuentro relativamente mucho más práctico en comparación con cómo lo hacemos usando solo CSS. Con estos conceptos es posible crear cualquier tipo de layout Grid, además de definir tamaños específicos para cada elemento involucrado. A partir de ahora lo único que tienes que hacer es practicar, crear designs increíbles con Tailwind y ¡listo!
¡Éxito!
Listopro Community da la bienvenida a todas las razas, etnias, nacionalidades, credos, géneros, orientaciones, puntos de vista e ideologías, siempre y cuando promuevan la diversidad, la equidad, la inclusión y el crecimiento profesional de los profesionales en tecnología.