Grid Básico

Con CSS Grid puedes posicionar contenido en dos ejes a la vez de forma clara y escalable. Activa el modelo con display: grid, define columnas con grid-template-columns usando fracciones fr, automatiza con la función repeat() y controla el espacio interno con gap. Verás un grid 2×2, cómo repartir 1fr 2fr 1fr, y cuándo preferir gap en lugar de margin.

¿Qué diferencia a grid de flexbox?

CSS Grid organiza elementos en columnas y filas simultáneamente, mientras que flexbox trabaja en un eje a la vez (horizontal o vertical). La clave es el contenedor padre: al aplicar display: grid, se activa el modelo de layout y los hijos se distribuyen en celdas.

• Contenedor padre con display: grid activado.
• Ejes doble: columnas y filas al mismo tiempo.
• Control directo de proporciones con la unidad fr.

Idea fuerza: si buscas estructuras bidimensionales (p. ej., 2 columnas por varias filas), usa grid; si solo necesitas un eje, usa flexbox.

¿Cómo crear columnas con grid-template-columns y fracciones fr?

La unidad fr es exclusiva de Grid: representa una fracción del espacio disponible del contenedor. Con grid-template-columns defines cuántas columnas y qué proporción ocupa cada una. Por ejemplo, 1fr 1fr reparte el espacio en dos partes iguales; al añadir una tercera 1fr, tendrás tres columnas. Con cuatro elementos, se forma un grid dos por dos automáticamente.

¿Cómo definir un grid dos por dos?

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

.item {
  background: #3498db;      /* azul del ejemplo */
  color: white;
  padding: 20px;
  text-align: center;
  margin: 3px;               /* visible, aunque con grid conviene usar gap */
}

• 1fr 1fr: dos columnas del mismo tamaño.
• Cuatro .item generan dos filas, formando el 2×2.

¿Cómo ajustar proporciones con 1fr, 2fr y 1fr?

.grid.fraccion {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

• La columna central ocupa el doble que las laterales.
• Si cambias 2fr por 1fr, tendrás tres columnas iguales.

¿Cómo manejar el espacio con gap y la función repeat?

Para evitar repetir valores, la función repeat() simplifica la definición de columnas: repeat(3, 1fr) crea tres columnas iguales. Además, gap establece el espacio entre columnas y filas del grid sin modificar el tamaño interior de los elementos, a diferencia de margin.

.grid.gap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;  /* espacio entre columnas y filas */
}

• repeat(3, 1fr): código más limpio y fácil de mantener.
• gap: 20px: separación clara entre celdas del grid.
• Recomendación práctica: si ya usas grid, preferir gap sobre margin para separar elementos.

¿Te quedó alguna duda sobre grid-template-columns, fracciones fr o gap? Comparte en comentarios qué layout quieres construir y lo revisamos juntos.