CSS Grid Template es una poderosa herramienta que permite definir la disposición de los elementos dentro de una cuadrícula usando una estructura repetitiva y declarativa. Puedes combinar varias propiedades de CSS Grid para crear layouts complejos de forma sencilla y eficiente. En esta sección, exploraremos cómo usar grid-template-columns, grid-template-rows, y grid-template-areas para definir el layout de una cuadrícula.

Definición de Plantillas de Columnas y Filas

grid-template-columns

La propiedad grid-template-columns define la estructura de las columnas en tu cuadrícula. Puedes especificar varios tamaños de columnas separados por espacios.

css

En este ejemplo, se crean tres columnas con anchuras de 100px, 200px, y 100px respectivamente.

grid-template-rows

La propiedad grid-template-rows define la estructura de las filas en tu cuadrícula.

css

Aquí, la cuadrícula tiene dos filas: la primera de 100px y la segunda de 200px.

Definición de Áreas de Cuadrícula

grid-template-areas

La propiedad grid-template-areas permite crear áreas nombradas dentro de la cuadrícula. Esto facilita la colocación de elementos en el layout.

css

html

En este ejemplo, se definen cuatro áreas de cuadrícula: header, sidebar, main, y footer, cada una ocupando varias celdas en la cuadrícula.

Combinación de Plantillas de Columnas, Filas y Áreas

Puedes combinar grid-template-columns, grid-template-rows y grid-template-areas para crear layouts complejos de forma concisa.

css

html

Este layout crea una estructura con una cabecera que ocupa toda la anchura, una barra lateral y una área de contenido principal que se expanden a través de dos columnas, y un pie de página que también ocupa toda la anchura.

Repetición de Pistas con repeat()

La función repeat() es útil para crear patrones repetitivos en la cuadrícula sin tener que escribir estilos redundantes.

css

Uso de minmax() para Plantillas Flexibles

La función minmax() permite definir un tamaño mínimo y máximo para las pistas, haciendo que la cuadrícula sea más flexible y adaptable.

css

Ejemplo Completo

Un ejemplo completo que incluye todas las propiedades grid-template-columns, grid-template-rows, y grid-template-areas:

html

Este ejemplo crea un contenedor de cuadrícula con una combinación de tamaños de columnas, filas y áreas nombradas, proporcionando un layout estructurado y adaptativo.

Conclusión

El uso de grid-template-columns, grid-template-rows, y grid-template-areas en CSS Grid te permite definir plantillas de diseño detalladas de forma clara y concisa. Estos conceptos son fundamentales para crear layouts dinámicos y flexibles que se adaptan a una variedad de requisitos de diseño y dispositivos.