CSS Grid es una poderosa herramienta para crear diseños de página complejos y responsivos. En este tema, aprenderemos cómo utilizar CSS Grid para construir diferentes tipos de layouts. Exploraremos conceptos clave, propiedades esenciales y ejemplos prácticos para que puedas aplicar estos conocimientos en tus propios proyectos.

Antes de sumergirnos en los ejemplos prácticos, es importante entender algunos conceptos clave de CSS Grid:

1. Grid Container: El elemento padre que contiene los elementos de la cuadrícula.
2. Grid Items: Los elementos hijos dentro del contenedor de la cuadrícula.
3. Grid Lines: Las líneas que dividen la cuadrícula en filas y columnas.
4. Grid Tracks: Las filas y columnas de la cuadrícula.
5. Grid Cells: Las celdas individuales formadas por la intersección de las filas y columnas.

• display: grid;: Define un elemento como un contenedor de cuadrícula.
• grid-template-columns: Define el número y tamaño de las columnas.
• grid-template-rows: Define el número y tamaño de las filas.
• gap: Define el espacio entre las filas y columnas.

• grid-column: Define en qué columna comienza y termina un ítem.
• grid-row: Define en qué fila comienza y termina un ítem.

Vamos a crear un layout básico con CSS Grid que tenga una cabecera, un contenido principal y un pie de página.

1. HTML:

   • Creamos un contenedor div con la clase grid-container.
   • Dentro del contenedor, añadimos tres elementos: header, main y footer.

2. CSS:

   • Definimos el contenedor de la cuadrícula con display: grid;.
   • Utilizamos grid-template-columns: 1fr; para crear una columna que ocupe todo el ancho disponible.
   • Utilizamos grid-template-rows: auto 1fr auto; para definir tres filas: la primera y la última con altura automática y la del medio ocupando el espacio restante.
   • Establecemos un espacio de 10px entre las filas con gap: 10px;.
   • Estilizamos los ítems de la cuadrícula con diferentes colores de fondo y padding.

Crea un layout con CSS Grid que tenga una cabecera, un contenido principal dividido en dos columnas y un pie de página.

HTML

CSS

1. HTML:

   • Añadimos un div con la clase sidebar para la barra lateral.

2. CSS:

   • Definimos dos columnas con grid-template-columns: 1fr 3fr;, donde la primera columna ocupa una fracción y la segunda tres fracciones del espacio disponible.
   • Utilizamos grid-column: 1 / 3; en la cabecera y el pie de página para que ocupen ambas columnas.

En esta lección, hemos aprendido cómo crear layouts básicos y de dos columnas utilizando CSS Grid. Hemos explorado las propiedades esenciales del contenedor y los ítems de la cuadrícula, y hemos aplicado estos conocimientos en ejemplos prácticos. Con CSS Grid, puedes crear diseños de página complejos y responsivos de manera eficiente y elegante. En la próxima lección, profundizaremos en el diseño responsivo con CSS Grid.