Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
grid-template-rows, grid-template-columns y grid-column/-row te dan control total sobre el tamaño y la posición de cada celda.
Explicación
Estas propiedades controlan el tamaño y la posición exacta de filas y columnas:
grid-template-columns: 2fr 1fr 1frDefine 3 columnas donde la primera ocupa el doble de espacio que las otras dos.
grid-template-rowsDefine la altura de cada fila de la cuadrícula.
grid-column: span 2Hace que una celda ocupe 2 columnas en vez de 1, uniendo el espacio.
grid-row: span 2Igual que grid-column, pero para que una celda ocupe varias filas de alto.
Reto rápido
Agrega grid-column: span 2 a la clase .destacado para que ocupe dos columnas.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Puedes mezclar unidades fijas (px) y flexibles (fr) en la misma línea de grid-template-columns, como "200px 1fr 1fr".
Dato extra
grid-column también acepta números de línea directamente, como grid-column: 1 / 3, que es equivalente a span 2 empezando en la línea 1.
Error común
Poner un valor de span mayor al número de columnas disponibles: la celda simplemente se ajusta al espacio que exista, dando resultados inesperados.
Siguiente paso
Ya controlas tamaños y posiciones numéricas. Ahora veamos una forma aún más visual de organizar tu grid: las áreas nombradas.
Ir a la siguiente lección