Primera cuadrícula — CSS: Diseño con Grid

• Paso 1: Crear un contenedor de cuadrícula
• Paso 2: Agregar elementos a nuestra cuadrícula
• Paso 3: Definir columnas y filas
• Paso 4: Hacer el código más eficiente con repeat
• Paso 5: Adaptabilidad con fr (fracción)

Ahora que ya conoces los conceptos básicos de CSS y HTML, es momento de aprender a crear una cuadrícula con CSS Grid.

En esta lección, vamos a construir nuestra primera cuadrícula de 12 columnas y 12 filas.

Paso 1: Crear un contenedor de cuadrícula

CSS Grid, al igual que Flexbox, necesita un contenedor para funcionar correctamente. Este contenedor es el elemento padre, dentro del cual estarán los elementos que se organizarán en una cuadrícula.

Para comenzar, creamos una sección con la clase .grid-12:

<section class="grid-12"></section>

Ahora, indicamos que esta sección será un contenedor de cuadrícula usando display: grid; en CSS:

.grid-12 {
  display: grid;
}

Si revisamos el resultado en el navegador, no veremos cambios. Esto es porque aún no hemos definido cómo se distribuyen las columnas y filas.

Paso 2: Agregar elementos a nuestra cuadrícula

Para entender cómo funciona CSS Grid, agreguemos algunos elementos dentro del contenedor:

<section class="grid-12">
  <div class="grid-element bg-gray"></div>
  <div class="grid-element bg-red"></div>
  <div class="grid-element bg-blue"></div>
</section>

Con CSS les daremos color para diferenciarlos:

.grid-element {
  width: 40px;
  height: 40px;
}

.bg-gray {
  background-color: gray;
}

.bg-red {
  background-color: red;
}

.bg-blue {
  background-color: blue;
}

Por defecto, CSS Grid coloca los elementos en una única columna y crea filas automáticamente. Si queremos organizarlo correctamente, debemos definir cómo queremos que se vean las columnas y las filas.

Paso 3: Definir columnas y filas

Para crear nuestra cuadrícula de 12 columnas y 12 filas, usamos las propiedades grid-template-columns y grid-template-rows:

.grid-12 {
  display: grid;
  grid-template-columns: 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px;
  grid-template-rows: 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px;
}

Como resultado, cada celda tendrá dimensiones de 20px por 20px. Pero este código es un poco largo y repetitivo, así que podemos simplificarlo.

Paso 4: Hacer el código más eficiente con repeat

En lugar de escribir cada valor de columna manualmente, podemos usar la función repeat:

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 20px);
  grid-template-rows: repeat(12, 20px);
}

Con esto, logramos el mismo resultado, pero con menos código y de forma más clara.

Además, podemos combinar repeat con otros valores:

.grid-12 {
  display: grid;
  grid-template-columns: repeat(6, 20px) repeat(6, 30px);
  grid-template-rows: repeat(6, 20px) repeat(6, 30px);
}

En este caso, las primeras 6 columnas y filas medirán 20px, y las siguientes 6 medirán 30px.

Paso 5: Adaptabilidad con fr (fracción)

Las unidades de fracciones (fr) permiten distribuir el espacio disponible de forma dinámica, sin necesidad de definir un tamaño fijo en píxeles. Esto hace que nuestra cuadrícula sea más flexible.

Si queremos que nuestras 12 columnas y 12 filas ocupen todo el ancho y alto del navegador, usamos fr:

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);

  width: 100vw;
  height: 100vh;
}

Aquí cada celda tomará una parte igual del espacio disponible, sin importar el tamaño de la pantalla.