Alineación de elementos en Grid

7.1 Propiedad justify-items

CSS Grid Layout proporciona herramientas efectivas para gestionar la alineación de elementos dentro de la cuadrícula. Las propiedades justify-items, align-items y place-items permiten ajustar con precisión cómo los grid-elementos se sitúan dentro de sus celdas tanto horizontal como verticalmente. Veamos estas propiedades en detalle.

La propiedad justify-items define la alineación horizontal de todos los grid-elementos dentro de sus celdas en toda la cuadrícula.

Sintaxis:

    
      .grid-container {
        justify-items: value;
      }
    
  

Donde:

• value: el valor que define la alineación horizontal de los elementos. Valores posibles:
  • start: alinea los elementos al inicio de la celda
  • end: alinea los elementos al final de la celda
  • center: centra los elementos dentro de la celda
  • stretch (por defecto): estira los elementos para llenar todo el ancho de la celda

Ejemplo 1: Alineación al inicio de la celda

En este ejemplo todos los elementos estarán alineados al borde izquierdo de sus celdas:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: start; /* Todos los elementos se alinean al inicio de la celda */
      }
    
  

Ejemplo 2: Centrando elementos

En este ejemplo todos los elementos estarán centrados dentro de sus celdas:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center; /* Todos los elementos se centran dentro de la celda */
      }
    
  

7.2 Propiedad align-items

La propiedad align-items define la alineación vertical de todos los grid-elementos dentro de sus celdas en toda la cuadrícula.

Sintaxis:

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

Donde:

• value: el valor que define la alineación vertical de los elementos. Valores posibles:
  • start: alinea los elementos al inicio de la celda
  • end: alinea los elementos al final de la celda
  • center: centra los elementos dentro de la celda verticalmente
  • stretch (por defecto): estira los elementos para llenar toda la altura de la celda

Ejemplo 1: Alineación al inicio de la celda

En este ejemplo todos los elementos estarán alineados al borde superior de sus celdas:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: start; /* Todos los elementos se alinean al inicio de la celda */
      }
    
  

Ejemplo 2: Centrando elementos verticalmente

En este ejemplo todos los elementos estarán centrados verticalmente dentro de sus celdas:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: center; /* Todos los elementos se centran verticalmente dentro de la celda */
      }
    
  

7.3 Propiedad place-items

La propiedad place-items es una forma abreviada de establecer simultáneamente los valores de align-items y justify-items.

Sintaxis:

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

Donde:

• align-value: el valor para la alineación vertical dentro de la celda (align-items)
• justify-value: el valor para la alineación horizontal dentro de la celda (justify-items)

Si se especifica un solo valor para la propiedad place-items, por ejemplo, place-items: stretch, los elementos se alinearán en ambas direcciones.

Ejemplo 1: Centrando elementos vertical y horizontalmente

En este ejemplo todos los elementos estarán centrados dentro de sus celdas tanto horizontal como verticalmente:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: center; /* Elementos centrados tanto horizontal como verticalmente */
      }
    
  

Ejemplo 2: Estirando elementos en altura y alineando al borde superior izquierdo

En este ejemplo todos los elementos estarán estirados en altura y alineados al borde superior izquierdo de sus celdas:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: stretch start; /* Elementos estirados a toda la altura de la celda y alineados al borde superior izquierdo */
      }
    
  

7.4 Ejemplo de implementación completa

Ejemplo de implementación completa:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Tres columnas de igual ancho */
        grid-template-rows: repeat(3, 100px); /* Tres filas de altura fija */
        gap: 10px;
        place-items: center center; /* Centrando elementos tanto horizontal como 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 de elementos en CSS 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 igual ancho y tres filas de altura fija. Utiliza la propiedad place-items para centrar elementos tanto horizontal como verticalmente
• .grid-item: define estilos básicos para los elementos de la cuadrícula, como el color de fondo, el color del texto, los márgenes, la alineación de texto y el borde