Alineación del contenedor Grid

8.1 Propiedad justify-content

CSS Grid Layout ofrece herramientas potentes para gestionar la alineación de todo el contenedor de la cuadrícula dentro del espacio disponible. Las propiedades justify-content, align-content y place-content permiten controlar la alineación de filas y columnas dentro del contenedor, proporcionando flexibilidad y precisión al crear layouts.

La propiedad justify-content gestiona la alineación horizontal de toda la cuadrícula dentro del contenedor. Esta propiedad es útil cuando el tamaño del contenedor es mayor que el ancho necesario de la propia cuadrícula.

Sintaxis:

    
      .grid-container {
        display: grid;
        justify-content: value;
      }
    
  

Donde: value puede tomar los siguientes valores:

• start: alinear la cuadrícula al inicio del contenedor
• end: alinear la cuadrícula al final del contenedor
• center: alinear la cuadrícula al centro del contenedor
• stretch: estirar la cuadrícula para llenar todo el contenedor
• space-around: colocar un espacio igual alrededor de cada elemento
• space-between: colocar un espacio igual entre los elementos
• space-evenly: colocar un espacio igual entre los elementos y los bordes del contenedor

Ejemplo 1: Alineación al inicio del contenedor

En este ejemplo, todo el contenido se alineará al borde izquierdo del contenedor:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: start; /* Alinea el contenido al borde izquierdo del contenedor */
      }
    
  

Ejemplo 2: Centrando el contenido

En este ejemplo, todo el contenido se centrará dentro del contenedor:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: center; /* Centra el contenido dentro del contenedor */
      }
    
  

8.2 Propiedad align-content

La propiedad align-content define cómo se alinea el contenido de la cuadrícula en el eje vertical dentro del contenedor de la cuadrícula. Es útil cuando la cuadrícula no llena todo el espacio vertical disponible.

Sintaxis:

    
      .grid-container {
        align-content: value;
      }
    
  

Donde: value — el valor que determina la alineación vertical del contenido. Valores posibles:

• start: alinea el contenido al inicio del contenedor
• end: alinea el contenido al final del contenedor
• center: centra el contenido dentro del contenedor
• space-between: coloca el contenido con el mismo espacio entre los elementos
• space-around: coloca el contenido con el mismo espacio alrededor de cada elemento
• space-evenly: coloca el contenido con el mismo espacio entre los elementos y los bordes del contenedor
• stretch (por defecto): estira el contenido para llenar todo el espacio disponible

Ejemplo 1: Alineación al inicio del contenedor

En este ejemplo, todo el contenido se alineará al borde superior del contenedor:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: start; /* Alinea el contenido al borde superior del contenedor */
      }
    
  

Ejemplo 2: Centrando el contenido

En este ejemplo, todo el contenido se centrará dentro del contenedor:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: center; /* Centra el contenido dentro del contenedor */
      }
    
  

8.3 Propiedad place-content

La propiedad place-content es una abreviatura para establecer simultáneamente los valores de justify-content y align-content.

Sintaxis:

    
      .grid-container {
        place-content: justify-value align-value;
      }
    
  

Donde:

• justify-value: valor para la alineación horizontal (justify-content)
• align-value: valor para la alineación vertical (align-content)

Ejemplo 1: Centrando el contenido horizontal y verticalmente

En este ejemplo, todo el contenido se centrará dentro del contenedor tanto horizontalmente como verticalmente:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: center center; /* Centra el contenido tanto horizontal como verticalmente */
      }
    
  

Ejemplo 2: Estirando el contenido en ancho y alineación al borde superior

En este ejemplo, el contenido se estirará en el ancho del contenedor y se alineará al borde superior:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: stretch start; /* Estira el contenido en ancho y alinea al borde superior */
      }
    
  

8.4 Ejemplo de implementación completa

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px); /* Tres columnas de ancho fijo */
        grid-template-rows: repeat(3, 100px); /* Tres filas de altura fija */
        gap: 10px;
        place-content: center center; /* Centrando el contenido horizontal y verticalmente */
      }

      .grid-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
        text-align: center;
        border: 1px solid #fff;
      }
    
  

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Ejemplo de alineación del contenedor Grid</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item item1">Elemento 1</div>
            <div class="grid-item item2">Elemento 2</div>
            <div class="grid-item item3">Elemento 3</div>
            <div class="grid-item item4">Elemento 4</div>
            <div class="grid-item item5">Elemento 5</div>
            <div class="grid-item item6">Elemento 6</div>
          </div>
        </body>
      </html>
    
  

Explicación del código:

• .grid-container: crea un contenedor Grid con tres columnas de ancho fijo y tres filas de altura fija. Utiliza la propiedad place-content para centrar el contenido horizontal y verticalmente.
• .grid-item: define los estilos básicos para los elementos de la cuadrícula, como el color de fondo, color del texto, padding, alineación del texto y borde.