Trabajando con la cuadrícula — CSS: Diseño con Grid

• ¿Por qué necesitamos márgenes en una cuadrícula?
• Propiedades para controlar el espaciado
  • Usando gap para filas y columnas
• Alineación del contenido en CSS Grid
  • justify-content: Alineación horizontal de la cuadrícula

Cuando usamos CSS Grid, no solo organizamos los elementos en filas y columnas, sino que también podemos controlar el espacio entre ellos y su alineación dentro del contenedor. En esta lección, veremos cómo hacerlo de manera eficiente.

¿Por qué necesitamos márgenes en una cuadrícula?

Miremos este ejemplo del blog de Códica:

Aquí, los elementos están organizados dentro de una cuadrícula, pero además, tienen espacios entre ellos. Estos márgenes evitan que el contenido se vea demasiado junto y mejoran la legibilidad.

En CSS Grid, en lugar de usar la propiedad tradicional margin, podemos aplicar márgenes automáticos entre las filas y columnas sin preocuparnos de anular márgenes extra en los bordes.

Propiedades para controlar el espaciado

Para agregar espacio entre los elementos dentro de una cuadrícula, existen tres propiedades:

Antes, estas propiedades se llamaban grid-column-gap y grid-row-gap, pero han sido reemplazadas por column-gap y row-gap, que funcionan tanto en Grid como en Flexbox.

Ejemplo: Añadiendo espacio entre columnas

En la siguiente cuadrícula, tenemos dos columnas sin separación. Vamos a agregar un margen entre ellas.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  column-gap: 30px; /* Espacio entre columnas */
}

Como puedes ver, ahora hay un espacio entre los elementos, pero el margen no se aplica dentro de ellos. Esto mantiene su contenido alineado correctamente.

Usando gap para filas y columnas

Para establecer un margen tanto entre columnas como entre filas, usamos gap:

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: auto auto;
  gap: 20px 30px; /* 20px entre filas, 30px entre columnas */
}

Si solo pones un valor:

gap: 20px;

Ese valor se aplicará tanto a filas como a columnas.

Alineación del contenido en CSS Grid

Además del espaciado, podemos alinear los elementos dentro de la cuadrícula usando justify-content y align-content.

justify-content: Alineación horizontal de la cuadrícula

justify-content controla cómo se distribuyen las columnas dentro del contenedor. Estos son sus valores más comunes:

Ejemplo con space-between:

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  justify-content: space-between;
}