Tutorial rápido sobre Grid CSS

Grid es un sistema poderoso y flexible de CSS para crear diseños en dos dimensiones (filas y columnas) en la web.

Vamos a ver de forma práctica y rápida como comenzar a utilizarlo.

Paso 1: Crear un Contenedor de Grid

Primero, crea un contenedor de grid. En tu HTML, tendrás algo como esto:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <!-- M&aacute;s elementos grid-item aqu&iacute; -->
</div>

En tu CSS, define el contenedor:

.grid-container {
  display: grid;
}

Prueba esto en un playground para ver cómo se comportan los elementos sin una definición explícita de grid.

Paso 2: Definir Columnas y Filas

Ahora, especifica las columnas y filas:

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

Añade esto y observa cómo se organizan los elementos en 3 columnas y 2 filas.

Paso 3: Espaciado entre Elementos (Grid Gap)

Introduce un espacio entre los elementos:

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px;
  grid-gap: 10px;
}

Prueba esto para ver cómo se añade el espacio entre los elementos del grid.

Paso 4: Colocar Elementos en la Grid

Utiliza grid-column y grid-row para posicionar un elemento:

.grid-item:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1;
}

Esto hace que el primer elemento abarque dos columnas.

Paso 5: Diseño Responsivo

Haz que tu grid sea responsivo. Cambia las columnas a un enfoque flexible:

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

Prueba esto para ver cómo las columnas se ajustan al cambiar el tamaño de la ventana del navegador.

👉  Scrapy

Paso 6: Áreas de Grid

Por último, prueba con áreas de grid para un control más detallado:

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

.grid-item:nth-child(1) { grid-area: header; }
.grid-item:nth-child(2) { grid-area: main; }
.grid-item:nth-child(3) { grid-area: aside; }
/* Asigna otros elementos a footer u otras &aacute;reas */

Cada grid-item se colocará en el área que le asignes.

Importante: Asegúrate de probar cada paso en tu playground para entender cómo cada cambio afecta el diseño. Experimentar y ver los resultados en tiempo real es una excelente manera de aprender CSS Grid.

👇Tu comentario