En CSS Grid, las pistas son las filas y columnas que constituyen la cuadrícula. Definir correctamente estas pistas es crucial para crear layouts que funcionen bien en diversas situaciones. Aquí exploraremos cómo especificar filas y columnas en detalle.

Propiedad grid-template-columns

La propiedad grid-template-columns define el número y el tamaño de las columnas en el contenedor Grid.

css

Este código crea tres columnas con anchuras de 100px, 200px y 100px, respectivamente.

Propiedad grid-template-rows

Similar a grid-template-columns, la propiedad grid-template-rows define el número y el tamaño de las filas en el contenedor Grid.

css

Este ejemplo crea un Grid con dos columnas iguales y dos filas de 50px y 100px, respectivamente.

Unidades de Medida

Al definir pistas, puedes usar varias unidades de medida:

1. px: píxeles.
2. %: porcentaje del contenedor Grid.
3. fr: fracción del espacio disponible. Una de las unidades más útiles en CSS Grid.
4. auto: tamaño automático basado en el contenido.
5. min-content y max-content: el tamaño mínimo y máximo del contenido.

css

Función repeat()

La función repeat() es una forma práctica de definir múltiples pistas con un patrón repetido.

css

Función minmax()

La función minmax() define un tamaño mínimo y máximo para una pista. Esto es útil para crear Grid responsivos.

css

Función auto-fit y auto-fill

auto-fit y auto-fill son funciones avanzadas que permiten crear Grid adaptativos que llenan el espacio disponible automáticamente.

css

Ejemplo Completo

Apliquemos estos conceptos en un ejemplo más detallado:

html

En este ejemplo, utilizamos la función repeat() para crear tres columnas iguales, y definimos tres filas: dos de 100px y una automática. También agregamos un espacio de 10px entre todas las pistas.

Conclusión

Definir las pistas de filas y columnas en CSS Grid es fundamental para estructurar correctamente el layout de tu diseño. Con el uso de diferentes unidades, funciones y técnicas, puedes crear Grids altamente adaptables y precisos que se ajustan a las necesidades de tu proyecto.