Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
display: grid convierte un elemento en una cuadrícula bidimensional, donde defines filas y columnas de forma explícita.
Explicación
display: grid es el punto de partida de CSS Grid:
display: gridConvierte al elemento en un "grid container"; sus hijos directos se acomodan en la cuadrícula.
grid-template-columnsDefine cuántas columnas tiene la cuadrícula y el ancho de cada una.
1frUnidad "fracción": reparte el espacio disponible en partes iguales entre las columnas o filas.
repeat(2, 1fr)Atajo para repetir un mismo valor varias veces, en este caso 2 columnas de 1fr cada una.
Reto rápido
Agrega una quinta celda y cambia grid-template-columns para que haya 3 columnas.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
La unidad fr es exclusiva de Grid (y Flexbox con flex) y es la forma más simple de crear columnas de igual o proporcional tamaño.
Dato extra
Grid resuelve de forma nativa layouts que antes requerían floats o trucos con Flexbox, como cuadrículas de tarjetas perfectamente alineadas en filas y columnas.
Error común
Olvidar que display: grid solo afecta a los hijos directos del contenedor: los nietos (hijos de los hijos) no forman parte de la cuadrícula automáticamente.
Siguiente paso
Ya tienes tu primera cuadrícula. Profundicemos en cómo definir filas y columnas con más control.
Ir a la siguiente lección