Curso de tailwind CSS

Introducción a CSS Grid

CSS Grid es un sistema de diseño de dos dimensiones (filas y columnas) que permite crear layouts complejos. Con Tailwind CSS, puedes aplicar propiedades de Grid rápidamente usando clases predefinidas.

¿Por qué usar CSS Grid?

  • Ideal para crear layouts complejos y de múltiples filas/columnas.
  • Soporta alineación en ambas dimensiones (horizontal y vertical).
  • Permite controlar el tamaño, la posición y el espaciado de los elementos fácilmente.

Activar CSS Grid en Tailwind

Para usar CSS Grid en Tailwind, simplemente añade la clase grid al contenedor.

1<div class="grid gap-2">
2  <div class="bg-blue-500 p-3">Elemento 1</div>
3  <div class="bg-green-500 p-3">Elemento 2</div>
4  <div class="bg-red-500 p-3">Elemento 3</div>
5</div>

1. Configuración Básica de Grid (grid-cols, grid-rows)

Grid Columns

Puedes definir el número de columnas en un contenedor usando grid-cols-{n}, donde {n} es el número de columnas.

1<div class="grid grid-cols-3 gap-2">
2  <div class="bg-blue-500 p-3">Columna 1</div>
3  <div class="bg-green-500 p-3">Columna 2</div>
4  <div class="bg-red-500 p-3">Columna 3</div>
5</div>

Grid Rows

Similar a las columnas, puedes definir el número de filas con grid-rows-{n}.

1<div class="grid grid-rows-3 gap-2">
2  <div class="bg-blue-500 p-3">Fila 1</div>
3  <div class="bg-green-500 p-3">Fila 2</div>
4  <div class="bg-red-500 p-3">Fila 3</div>
5</div>

2. Espaciado entre Elementos (gap)

La clase gap agrega espacio entre filas y columnas. Puedes aplicar espacio uniforme o específico para filas o columnas.

  • gap-2: espacio de 1 rem entre filas y columnas.
1<div class="grid grid-cols-2 gap-2">
2  <div class="bg-blue-500 p-3">Elemento 1</div>
3  <div class="bg-green-500 p-3">Elemento 2</div>
4  <div class="bg-red-500 p-3">Elemento 3</div>
5  <div class="bg-yellow-500 p-3">Elemento 4</div>
6</div>
  • gap-x-4: espacio horizontal (columnas).
1<div class="grid grid-cols-2 gap-x-4">
2  <div class="bg-blue-500 p-3">Elemento 1</div>
3  <div class="bg-green-500 p-3">Elemento 2</div>
4  <div class="bg-red-500 p-3">Elemento 3</div>
5  <div class="bg-yellow-500 p-3">Elemento 4</div>
6</div>
  • gap-y-4: espacio vertical (filas).
1<div class="grid grid-cols-2 gap-y-4">
2  <div class="bg-blue-500 p-3">Elemento 1</div>
3  <div class="bg-green-500 p-3">Elemento 2</div>
4  <div class="bg-red-500 p-3">Elemento 3</div>
5  <div class="bg-yellow-500 p-3">Elemento 4</div>
6</div>

3. Control de Tamaño de Columnas

Puedes definir el tamaño de las columnas en fracciones, lo cual es útil para layouts flexibles.

  • grid-cols-1: una sola columna que ocupa todo el ancho.
1<div class="grid grid-cols-1 gap-2">
2  <div class="bg-blue-500 p-3">Columna 1</div>
3  <div class="bg-green-500 p-3">Columna 2</div>
4  <div class="bg-red-500 p-3">Columna 3</div>
5</div>
  • grid-cols-2: dos columnas de igual tamaño.
1<div class="grid grid-cols-2 gap-2">
2  <div class="bg-blue-500 p-3">Columna 1</div>
3  <div class="bg-green-500 p-3">Columna 2</div>
4  <div class="bg-red-500 p-3">Columna 3</div>
5</div>
  • grid-cols-3, grid-cols-4: varias columnas iguales.
1<div class="grid grid-cols-3 gap-2">
2  <div class="bg-blue-500 p-3">Columna 1</div>
3  <div class="bg-green-500 p-3">Columna 2</div>
4  <div class="bg-red-500 p-3">Columna 3</div>
5</div>

4. Alineación de los Elementos (justify-items, align-items)

Justificación Horizontal

Controla cómo se alinean los elementos horizontalmente en el grid.

  • justify-items-start: alineación al inicio.
1<div class="grid grid-cols-3 justify-items-start gap-2">
2  <div class="bg-blue-500 p-3">Elemento 1</div>
3  <div class="bg-green-500 p-3">Elemento 2</div>
4  <div class="bg-red-500 p-3">Elemento 3</div>
5</div>
  • justify-items-center: alineación al centro.
1<div class="grid grid-cols-3 justify-items-center gap-2">
2  <div class="bg-blue-500 p-3">Elemento 1</div>
3  <div class="bg-green-500 p-3">Elemento 2</div>
4  <div class="bg-red-500 p-3">Elemento 3</div>
5</div>
  • justify-items-end: alineación al final.
1<div class="grid grid-cols-3 justify-items-end gap-2">
2  <div class="bg-blue-500 p-3">Elemento 1</div>
3  <div class="bg-green-500 p-3">Elemento 2</div>
4  <div class="bg-red-500 p-3">Elemento 3</div>
5</div>

Alineación Vertical

Controla la alineación vertical de los elementos en el grid.

  • items-start: alinea los elementos al inicio de la fila.
1<div class="h-screen grid grid-cols-3 items-start gap-2">
2  <div class="bg-blue-500 p-3">Elemento 1</div>
3  <div class="bg-green-500 p-3">Elemento 2</div>
4  <div class="bg-red-500 p-3">Elemento 3</div>
5</div>
  • items-center: alinea los elementos al centro de la fila.
1<div class="h-screen grid grid-cols-3 items-center gap-2">
2  <div class="bg-blue-500 p-3">Elemento 1</div>
3  <div class="bg-green-500 p-3">Elemento 2</div>
4  <div class="bg-red-500 p-3">Elemento 3</div>
5</div>
  • items-end: alinea los elementos al final de la fila.
1<div class="h-screen grid grid-cols-3 items-end gap-2">
2  <div class="bg-blue-500 p-3">Elemento 1</div>
3  <div class="bg-green-500 p-3">Elemento 2</div>
4  <div class="bg-red-500 p-3">Elemento 3</div>
5</div>

5. Control de Tamaño para Filas y Columnas (auto-rows, auto-cols)

Con auto-rows y auto-cols, puedes definir el tamaño automático de filas y columnas.

  • auto-rows-min: establece el tamaño mínimo de las filas.
1<div class="grid grid-cols-3 auto-rows-min gap-2">
2  <div class="bg-blue-500 p-3 h-24">Elemento 1</div>
3  <div class="bg-green-500 p-3 h-16">Elemento 2</div>
4  <div class="bg-red-500 p-3 h-32">Elemento 3</div>
5</div>
  • auto-cols-max: establece el tamaño máximo de las columnas.
1<div class="grid grid-cols-3 auto-cols-max gap-2">
2  <div class="bg-blue-500 p-3 h-24">Elemento 1</div>
3  <div class="bg-green-500 p-3 h-16">Elemento 2</div>
4  <div class="bg-red-500 p-3 h-32">Elemento 3</div>
5</div>

6. Grid Template Areas

grid-template-areas permite definir áreas específicas en el grid para posicionar elementos.

Ejemplo

1<div class="grid grid-cols-4 grid-rows-2 gap-2">
2  <div class="col-span-2 row-span-2 bg-blue-500 p-3">Área Principal</div>
3  <div class="col-span-2 bg-green-500 p-3">Encabezado</div>
4  <div class="col-span-1 bg-red-500 p-3">Sidebar</div>
5  <div class="col-span-1 bg-yellow-500 p-3">Contenido</div>
6</div>

7. Ejemplo Completo: Layout de Página con Grid

Combina todo para crear un layout completo para una página.

1<div class="grid grid-cols-4 grid-rows-6 gap-2 min-h-screen">
2
3  <header class="col-span-4 row-span-1 bg-blue-500 p-3 text-white">
4    Encabezado
5  </header>
6
7  <aside class="col-span-1 row-span-4 bg-green-500 p-3 text-white">
8    Barra Lateral
9  </aside>
10
11  <main class="col-span-3 row-span-4 bg-gray-200 p-3">
12    Contenido Principal
13  </main>
14
15  <footer class="col-span-4 row-span-1 bg-blue-500 p-3 text-white">
16    Pie de Página
17  </footer>
18
19</div>

Explicación

  1. grid-cols-4: define cuatro columnas para el layout.
  2. grid-rows-6: define seis filas en el layout.
  3. col-span y row-span: controla cuánto espacio ocupa cada área.

Con esto, tienes un layout completo y adaptable usando Tailwind CSS Grid.

8. Responsividad con Grid en Tailwind CSS

Usa las clases de Tailwind para cambiar las configuraciones de grid en diferentes tamaños de pantalla.

1<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
2  <div class="bg-blue-500 p-3">Elemento 1</div>
3  <div class="bg-green-500 p-3">Elemento 2</div>
4  <div class="bg-red-500 p-3">Elemento 3</div>
5  <div class="bg-yellow-500 p-3">Elemento 4</div>
6</div>

En este ejemplo, el grid tendrá una sola columna en pantallas pequeñas (grid-cols-1), dos columnas en pantallas medianas (md:grid-cols-2), y cuatro columnas en pantallas grandes (lg:grid-cols-4).

Conclusión

CSS Grid en Tailwind CSS facilita la creación de layouts potentes y complejos. Con solo agregar clases, puedes crear grids que se adaptan a diferentes tamaños de pantalla y diseños sofisticados con poco esfuerzo. Practica cada concepto para crear estructuras de página flexibles y modernas.

9. Control Preciso del Tamaño de las Filas y Columnas (fracción, porcentaje y px)

Además de los ajustes de fracciones (grid-cols-N), puedes usar clases de Tailwind para definir tamaños más precisos en columnas y filas, utilizando unidades de fracción (fr), porcentajes (%), o píxeles (px).

Ejemplo

1<div class="grid grid-cols-[1fr_2fr_100px] gap-4">
2  <div class="bg-blue-500 p-4">Columna 1 (1fr)</div>
3  <div class="bg-green-500 p-4">Columna 2 (2fr)</div>
4  <div class="bg-red-500 p-4">Columna 3 (100px)</div>
5</div>

En este ejemplo:

  • La primera columna ocupa una fracción del espacio disponible.
  • La segunda columna ocupa el doble que la primera.
  • La tercera columna tiene un ancho fijo de 100 píxeles.

10. Posicionamiento de Elementos con Grid (col-start, col-end, row-start, row-end)

Estas clases permiten posicionar un elemento en un lugar específico dentro del grid, controlando dónde empieza y termina en filas y columnas.

  • col-start-N: define el inicio de la columna.
  • col-end-N: define el fin de la columna.
  • row-start-N y row-end-N: hacen lo mismo para filas.

Ejemplo

1<div class="grid grid-cols-4 grid-rows-4 gap-4">
2  <div class="col-start-1 col-end-3 row-start-1 row-end-2 bg-blue-500 p-4">Elemento A</div>
3  <div class="col-start-3 col-end-5 row-start-1 row-end-3 bg-green-500 p-4">Elemento B</div>
4  <div class="col-start-1 col-end-5 row-start-3 row-end-5 bg-red-500 p-4">Elemento C</div>
5</div>

En este ejemplo:

  • El elemento A ocupa desde la columna 1 hasta la 3 y la fila 1.
  • El elemento B ocupa desde la columna 3 hasta la 5 y desde la fila 1 hasta la 3.
  • El elemento C ocupa todo el ancho desde la fila 3 hasta la 5.

11. Grid Auto-Placement y Grid Flow (grid-flow-row, grid-flow-col, grid-flow-dense)

El grid-flow permite especificar cómo los elementos llenarán el grid automáticamente.

  • grid-flow-row: llena el grid por filas.
  • grid-flow-col: llena el grid por columnas.
  • grid-flow-dense: intenta llenar los huecos en el grid ocupando el espacio disponible (útil si tienes elementos de diferentes tamaños).

Ejemplo

1<div class="grid grid-cols-3 grid-flow-row gap-4">
2  <div class="bg-blue-500 p-4">Elemento 1</div>
3  <div class="bg-green-500 p-4 col-span-2">Elemento 2</div>
4  <div class="bg-red-500 p-4">Elemento 3</div>
5  <div class="bg-yellow-500 p-4">Elemento 4</div>
6</div>

En este ejemplo:

  • Los elementos llenan el grid por filas debido a grid-flow-row.
  • La clase col-span-2 hace que el Elemento 2 ocupe dos columnas.

12. Ejemplo Avanzado: Layout de Dashboard con CSS Grid

Vamos a combinar varios conceptos para crear un layout de Dashboard con una barra lateral, un encabezado y una sección principal de contenido dividida en varias partes.

1<div class="grid grid-cols-6 grid-rows-6 gap-4 min-h-screen">
2  <!-- Header -->
3  <header class="col-span-6 bg-blue-600 p-4 text-white">
4    Encabezado
5  </header>
6
7  <!-- Sidebar -->
8  <aside class="col-span-1 row-span-5 bg-gray-800 p-4 text-white">
9    Barra Lateral
10  </aside>
11
12  <!-- Main Content -->
13  <main class="col-span-5 row-span-4 bg-white p-4">
14    <div class="grid grid-cols-2 gap-4 h-full">
15      <div class="bg-green-500 p-4">Panel A</div>
16      <div class="bg-yellow-500 p-4">Panel B</div>
17      <div class="col-span-2 bg-red-500 p-4">Panel Principal</div>
18    </div>
19  </main>
20
21  <!-- Footer -->
22  <footer class="col-span-6 bg-blue-600 p-4 text-white">
23    Pie de Página
24  </footer>
25</div>

Explicación

  1. Encabezado: ocupa toda la fila superior (col-span-6).
  2. Barra Lateral: ocupa la primera columna en las filas de 2 a 6 (col-span-1 y row-span-5).
  3. Contenido Principal: ocupa el espacio restante, con un subgrid dividido en dos columnas.
  4. Pie de Página: ocupa toda la última fila (col-span-6).

Este layout es flexible y puede adaptarse fácilmente a diferentes tamaños de pantalla.

12. place-items-center

Al usar place-items-center, estamos combinando justify-items: center; y align-items: center;, logrando que todos los elementos dentro del contenedor de grid se centren en el medio, tanto horizontal como verticalmente.

1<div class="grid h-screen w-64 place-items-center bg-gray-200">
2  <p class="text-lg text-gray-700">Centrado</p>
3</div>

13. Layout Responsivo Avanzado con Grid y Breakpoints

Un layout responsivo con Grid permite ajustar la estructura según el tamaño de la pantalla. Tailwind facilita esta tarea gracias a sus clases de sm, md, lg, etc.

Ejemplo

1<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
2  <div class="bg-blue-500 p-4">Elemento 1</div>
3  <div class="bg-green-500 p-4">Elemento 2</div>
4  <div class="bg-red-500 p-4">Elemento 3</div>
5  <div class="bg-yellow-500 p-4">Elemento 4</div>
6</div>

Explicación

  • En pantallas pequeñas (sm), el grid tiene 2 columnas.
  • En pantallas medianas (md), el grid tiene 3 columnas.
  • En pantallas grandes (lg), el grid tiene 4 columnas.

Este enfoque permite que el layout se adapte automáticamente según el tamaño del dispositivo, mejorando la experiencia del usuario en dispositivos móviles.

  • Loading...

  • Usando tailwind y grid, centra el botón en la pantalla.

    Loading...
← Diseño con Flexbox parte 2Volver al cursoResumen completo de clases de Tailwind →