FemCoders CSS Grid Examples

Grid Implícito vs Grid Explícito

Entender la diferencia entre Grid implícito y explícito es fundamental para dominar CSS Grid. Este concepto nos permite controlar cómo se comporta el grid cuando tiene más elementos de los que inicialmente definimos.

Grid Explícito

El grid explícito es el que defines conscientemente con propiedades como grid-template-columns y grid-template-rows.

Grid Implícito

El grid implícito es el que el navegador crea automáticamente cuando hay más elementos que celdas definidas en el grid explícito.

Comparación Visual

Observa cómo se comporta un grid con 12 elementos cuando el grid explícito solo define espacio para 6 elementos:

Grid Explícito (3x2)

1
2
3
4
5
6
7
8
9
10
11
12
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}
/* Elementos 7-12 van al grid implícito */

Grid Implícito Controlado

1
2
3
4
5
6
7
8
9
10
11
12
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  grid-auto-rows: 150px;
  gap: 10px;
}
/* Elementos 7-12 con altura controlada */

Propiedades para Controlar el Grid Implícito

grid-auto-rows

Define la altura de las filas implícitas que se crean automáticamente. 

grid-auto-rows: 150px; /* Altura fija */
grid-auto-rows: minmax(100px, auto); /* Altura mínima con extensión automática */

grid-auto-columns

Define el ancho de las columnas implícitas que se crean automáticamente. 

grid-auto-columns: 200px; /* Ancho fijo */
grid-auto-columns: minmax(150px, 1fr); /* Ancho mínimo con distribución proporcional */

grid-auto-flow

Controla cómo se colocan automáticamente los elementos en el grid. 

grid-auto-flow: row; /* Elementos adicionales crean nuevas filas (predeterminado) */
grid-auto-flow: column; /* Elementos adicionales crean nuevas columnas */
grid-auto-flow: dense; /* Intenta llenar espacios vacíos si es posible */

Prueba Interactiva

Experimenta con diferentes configuraciones y observa cómo afecta al grid implícito:

12

CSS Generado:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  grid-auto-flow: row;
  gap: 10px;
}

Casos de uso prácticos

Galerías Dinámicas

Ideal para cuando no sabes de antemano cuántas imágenes tendrá tu galería. Puedes definir un layout base y dejar que el grid implícito maneje el resto.

Interfaces de Administración

Para dashboards donde la cantidad de widgets o componentes puede variar según los permisos del usuario o las preferencias.

Feeds de Contenido

Para blogs o redes sociales donde el contenido se carga dinámicamente y necesitas que el layout se adapte automáticamente.

Catálogos de Productos

Donde los productos pueden tener diferentes tamaños o destacados, y necesitas un layout que se adapte a diferentes cantidades de productos.

Desafío

¿Te animas a experimentar con el grid implícito? Intenta:

Recuerda que entender cómo funciona el grid implícito te da mucho más control sobre tus layouts, especialmente cuando trabajas con contenido dinámico.