CSS Grid

CSS Grid Layout es un sistema de diseño bidimensional que permite crear diseños complejos de manera más sencilla y flexible en comparación con otros métodos como Flexbox. Grid permite trabajar tanto con filas como con columnas, facilitando el diseño de estructuras más sofisticadas.

1. Contenedor Grid

Para empezar a usar CSS Grid, debes definir un contenedor grid aplicando la propiedad display: grid.

Sintaxis Básica:

.contenedor-grid {
    display: grid;
}

2. Definir Filas y Columnas

Puedes definir el número y el tamaño de las filas y columnas en el contenedor grid usando las propiedades grid-template-rows y grid-template-columns.

Ejemplo de definición de filas y columnas:

.contenedor-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Tres columnas con proporciones 1:2:1 */
    grid-template-rows: auto 100px; /* Dos filas: la primera de tamaño automático, la segunda de 100px */
}

- fr: Unidad flexible que distribuye el espacio disponible.

3. Áreas de Grid

Puedes definir áreas específicas dentro del grid usando grid-template-areas. Esto facilita el diseño y la organización del contenido.

Ejemplo de definición de áreas:

.contenedor-grid {
    display: grid;
    grid-template-areas:
      "header header header"
      "sidebar main main"
      "footer footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 50px 1fr 30px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

4. Posicionar Elementos en el Grid

Puedes posicionar elementos específicos en el grid usando grid-column y grid-row.

Ejemplo de posicionamiento:

.elemento {
    grid-column: 2 / 4; /* Ocupa desde la columna 2 hasta la 4 (exclusiva) */
    grid-row: 1 / 2; /* Ocupa la fila 1 */
}

5. Alineación en Grid

CSS Grid proporciona propiedades para alinear el contenido dentro del grid:

justify-items: Alinea los ítems dentro de sus celdas a lo largo del eje horizontal.

.contenedor-grid {
    justify-items: center; /* Opciones: start, end, center, stretch */
}

align-items: Alinea los ítems dentro de sus celdas a lo largo del eje vertical.

.contenedor-grid {
    align-items: center; /* Opciones: start, end, center, stretch */
}

justify-content: Alinea el grid dentro del contenedor a lo largo del eje horizontal.

.contenedor-grid {
    justify-content: space-between; /* Opciones: start, end, center, space-between, space-around, space-evenly */
}

align-content: Alinea el grid dentro del contenedor a lo largo del eje vertical.

.contenedor-grid {
    align-content: space-around; /* Opciones: start, end, center, space-between, space-around, stretch */
}

6. Ejemplo Completo

Aquí tienes un ejemplo completo que muestra cómo usar CSS Grid para crear una página básica con un diseño de encabezado, barra lateral, contenido principal y pie de página:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo CSS Grid</title>
    <style>
        .contenedor-grid {
            display: grid;
            grid-template-areas:
                "header header header"
                "sidebar main main"
                "footer footer footer";
            grid-template-columns: 1fr 3fr;
            grid-template-rows: 50px 1fr 30px;
            gap: 10px;
        }
        
        .header {
            grid-area: header;
            background-color: #f4f4f4;
            padding: 10px;
            text-align: center;
        }
        
        .sidebar {
            grid-area: sidebar;
            background-color: #eaeaea;
            padding: 10px;
        }
        
        .main {
            grid-area: main;
            background-color: #dcdcdc;
            padding: 10px;
        }
        
        .footer {
            grid-area: footer;
            background-color: #f4f4f4;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="contenedor-grid">
        <div class="header">Encabezado</div>
        <div class="sidebar">Barra Lateral</div>
        <div class="main">Contenido Principal</div>
        <div class="footer">Pie de Página</div>
    </div>
</body>
</html>