Grid CSS
Published: 2024-07-16 14:45:21


El Grid Layout de CSS es una poderosa herramienta para crear diseños bidimensionales en la web. A continuación, se presentan las propiedades correspondientes al contenedor y los elementos hijos, junto con ejemplos.

#### Propiedades del Contenedor (Grid Container)

1. **`display: grid`**
    
  - Define un elemento como contenedor de grid.
  - **Ejemplo:**
    
```css
   .grid-container {
    display: grid;
}

```

2. **`grid-template-columns`**

- Define las columnas del grid.
- **Ejemplo:**

```css

.grid-container {
    grid-template-columns: repeat(3, 1fr); /* Tres columnas iguales */
}

```

3. **`grid-template-rows`**

- Define las filas del grid.
- **Ejemplo:**

```css

.grid-container {
    grid-template-rows: 100px 200px; /* Dos filas, la primera de 100px y la segunda de 200px */
}

```

4. **`gap`**

- Define el espacio entre las filas y columnas.
- **Ejemplo:**

```css

.grid-container {
    gap: 10px; /* Espacio de 10px entre filas y columnas */
}

```

5. **`grid-template-areas`**

- Define áreas del grid.
- **Ejemplo:**

```css

.grid-container {
    grid-template-areas:
      'header header header'
      'main main sidebar'
      'footer footer footer';
}

```

6. **`grid-auto-rows`**
    
   - Define el tamaño de las filas implícitas (aquellas no definidas explícitamente en `grid-template-rows`).
   - **Ejemplo:**

```css
.grid-container {
    grid-auto-rows: 150px; /* Todas las filas implícitas tendrán una altura de 150px */
}

```

7. **`grid-auto-columns`**
    
   - Define el tamaño de las columnas implícitas.
   - **Ejemplo:**

```css

.grid-container {
    grid-auto-columns: 150px; /* Todas las columnas implícitas tendrán un ancho de 150px */
}

```

8. **`grid-auto-flow`**
    
   - Controla cómo se colocan automáticamente los elementos en el grid.
    - Valores posibles: `row`, `column`, `row dense`, `column dense`.
   - **Ejemplo:**

```css

.grid-container {
    grid-auto-flow: row; /* Los elementos se colocarán en filas */
}
```

9. **`justify-items`**

- Alinea el contenido de los elementos hijos a lo largo del eje horizontal.
- Valores posibles: `start`, `end`, `center`, `stretch`.
- **Ejemplo:**

```css

.grid-container {
    justify-items: center; /* Alinea el contenido de los elementos hijos en el centro horizontalmente */
}

```

10. **`align-items`**

- Alinea el contenido de los elementos hijos a lo largo del eje vertical.
- Valores posibles: `start`, `end`, `center`, `stretch`.
- **Ejemplo:**
	
```css
.grid-container {
    align-items: center; /* Alinea el contenido de los elementos hijos en el centro verticalmente */
}
```

11. **`justify-content`**

- Alinea la totalidad del grid a lo largo del eje horizontal.
- Valores posibles: `start`, `end`, `center`, `space-between`, `space-around`, `space-evenly`.
- **Ejemplo:**

```css
.grid-container {
    justify-content: space-between; /* Distribuye el espacio entre los elementos del grid */
}

```

12. **`align-content`**

- Alinea la totalidad del grid a lo largo del eje vertical.
- Valores posibles: `start`, `end`, `center`, `space-between`, `space-around` `space-evenly`, `stretch`.
- **Ejemplo:**

```css

.grid-container {
    align-content: center; /* Alinea el contenido del grid en el centro verticalmente */
}

```


#### Propiedades de los Hijos (Grid Ítems)

1. **`grid-column`**

- Define el inicio y el fin de una columna.
- **Ejemplo:**

```css

.grid-item {
    grid-column: 1 / 3; /* Ocupa desde la columna 1 hasta la 3 */
}

```

2. **`grid-row`**

- Define el inicio y el fin de una fila.
- **Ejemplo:**

```css

.grid-item {
    grid-row: 1 / 2; /* Ocupa desde la fila 1 hasta la 2 */
}

```

3. **`grid-area`**

- Asigna el área definida en `grid-template-areas`.
- **Ejemplo:**

```css
.header {
    grid-area: header;
}
.main {
    grid-area: main;
}
.sidebar {
    grid-area: sidebar;
}
.footer {
    grid-area: footer;
}

```

4. **`grid-column-start`**

- Define la línea de inicio de una columna.
- **Ejemplo:**
```css
.grid-item {
    grid-column-start: 2; /* El elemento comenzará en la columna 2 */
}

```

5. **`grid-column-end`**

- Define la línea de fin de una columna.
- **Ejemplo:**

```css
.grid-item {
    grid-column-end: 4; /* El elemento terminará en la columna 4 */
}

```

6. **`grid-row-start`**

- Define la línea de inicio de una fila.
- **Ejemplo:**

```css

.grid-item {
    grid-row-start: 1; /* El elemento comenzará en la fila 1 */
}

```

7. **`grid-row-end`**

- Define la línea de fin de una fila.
- **Ejemplo:**

```css

.grid-item {
    grid-row-end: 3; /* El elemento terminará en la fila 3 */
}

```

8. **`justify-self`**

- Alinea el contenido de un solo elemento a lo largo del eje horizontal.
- Valores posibles: `start`, `end`, `center`, `stretch`.
- **Ejemplo:**

```css

.grid-item {
    justify-self: end; /* Alinea el contenido del elemento al final horizontalmente */
}

```

9. **`align-self`**

- Alinea el contenido de un solo elemento a lo largo del eje vertical.
- Valores posibles: `start`, `end`, `center`, `stretch`.
- **Ejemplo:**

```css

.grid-item {
    align-self: center; /* Alinea el contenido del elemento en el centro verticalmente */
}

```


#### Ejemplo Completo con Más Propiedades de Grid Layout


**HTML**
```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Layout Example</title>
    
</head>
<body>
    <div class="grid-container">
        <div class="header">Header</div>
        <div class="main">Main Content</div>
        <div class="sidebar">Sidebar</div>
        <div class="footer">Footer</div>
        <div class="grid-item1">Item 1</div>
        <div class="grid-item2">Item 2</div>
    </div>
</body>
</html>

```

**CSS**

```css
<style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 100px 200px 100px;
            gap: 10px;
            grid-auto-rows: 150px;
            grid-auto-columns: 150px;
            grid-auto-flow: row dense;
            justify-items: center;
            align-items: center;
            justify-content: space-between;
            align-content: center;
            grid-template-areas:
              'header header header'
              'main main sidebar'
              'footer footer footer';
        }

        .header {
            grid-area: header;
            background-color: #f1c40f;
        }
        .main {
            grid-area: main;
            background-color: #1abc9c;
        }
        .sidebar {
            grid-area: sidebar;
            background-color: #e74c3c;
        }
        .footer {
            grid-area: footer;
            background-color: #3498db;
        }

        .grid-item1 {
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 2;
            justify-self: center;
            align-self: center;
        }

        .grid-item2 {
            grid-area: 2 / 2 / 4 / 4;
            justify-self: start;
            align-self: end;
        }
    </style>
```