Contenedor de Grid en CSS | Explicado

¿Cómo funciona un Grid Container en CSS?

Un contenedor de grid en CSS funciona dividiendo el espacio disponible en filas y columnas. Las filas y columnas se definen utilizando la propiedad grid-template-rows y grid-template-columns.

Por ejemplo, si deseas dividir tu cuadrícula en tres filas y tres columnas, puedes usar el siguiente código:

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

En este ejemplo, la propiedad grid-template-rows establece que se crearán tres filas iguales, mientras que la propiedad grid-template-columns establece que se crearán tres columnas iguales.

Cómo utilizar un Grid Container en CSS

Para utilizar un contenedor de grid en CSS, debes seguir los siguientes pasos:

1. Crea un contenedor de grid utilizando la propiedad display: grid;
2. Define las filas y las columnas utilizando las propiedades grid-template-rows y grid-template-columns
3. Agarra los elementos que deseas agregar a la cuadrícula y colócalos dentro del contenedor de grid.
4. Usa la propiedad grid-row y grid-column para especificar en qué fila y columna debe estar cada elemento de la cuadrícula.

Por ejemplo, para colocar un elemento en la segunda fila y la tercera columna, puedes usar el siguiente código:

.elemento {
  grid-row: 2;
  grid-column: 3;
}

Ejemplos de código

A continuación, te presentamos algunos ejemplos de código que puedes utilizar para crear un contenedor de grid en CSS y agregar elementos a la cuadrícula.

/* Crea un contenedor de grid */
.grid-container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}
/* Agrega elementos a la cuadrícula */
.elemento-1 {
  grid-row: 1;
  grid-column: 1;
}  
.elemento-2 {
  grid-row: 1;
  grid-column: 2;
}  
.elemento-3 {
  grid-row: 1;
  grid-column: 3;
}  
.elemento-4 {
  grid-row: 2 / span 2;
  grid-column: 1 / span 2;
}  
.elemento-5 {
  grid-row: 2;
  grid-column: 3;
}  
.elemento-6 {
  grid-row: 3;
  grid-column: 2 / span 2;
}