CSS Grid: Diseño de Rejillas

CSS Grid Layout (o simplemente "Grid") es un sistema de diseño bidimensional para la web. A diferencia de Flexbox, que se centra en una sola dimensión (ya sea una fila o una columna), Grid permite controlar tanto las filas como las columnas, lo que lo hace ideal para crear diseños complejos y responsivos.

Conceptos Clave

• Contenedor Grid (Grid Container): El elemento padre al que se le aplica la propiedad display: grid; o display: inline-grid;. Esto convierte a sus hijos directos en *items grid*.
• Items Grid (Grid Items): Los hijos directos del contenedor grid. Son los elementos que se posicionan y dimensionan dentro de la cuadrícula.
• Líneas de la Cuadrícula (Grid Lines): Las líneas divisorias horizontales y verticales que forman la estructura de la cuadrícula. Se numeran a partir de 1.
• Celdas de la Cuadrícula (Grid Cells): El espacio entre cuatro líneas de la cuadrícula adyacentes. Es la unidad más pequeña de la cuadrícula.
• Pistas de la Cuadrícula (Grid Tracks): El espacio entre dos líneas de la cuadrícula adyacentes. Puede ser una fila o una columna.
• Área de la Cuadrícula (Grid Area): Un espacio rectangular delimitado por cuatro líneas de la cuadrícula. Puede contener una o varias celdas.

Propiedades del Contenedor Grid

Estas propiedades se aplican al *contenedor* grid (el elemento padre):

• display: grid | inline-grid;: Activa Grid Layout. grid crea un contenedor grid a nivel de bloque, mientras que inline-grid crea un contenedor grid a nivel de línea.
• grid-template-columns: Define las columnas de la cuadrícula, especificando el tamaño de cada pista de columna.
• grid-template-rows: Define las filas de la cuadrícula, especificando el tamaño de cada pista de fila.

• Ejemplos de grid-template-columns y grid-template-rows:

  1

  2

  3

  4

  5

  6

  .grid-template-example1 {
      grid-template-columns: 1fr 1fr 1fr; /* Tres columnas iguales */
      grid-template-rows: 100px 150px;  /* Dos filas, una de 100px y otra de 150px */
  }

  1

  2

  3

  4

  5

  6

  .grid-template-example2 {
      grid-template-columns: repeat(4, 1fr); /* Cuatro columnas iguales */
      grid-template-rows: auto auto auto; /* Tres filas de altura automática */
  }

  1

  2

  3

  4

  5

  6

  .grid-template-example3 {
      grid-template-columns: 200px 1fr 2fr; /* Columna fija y dos flexibles */
      grid-template-rows: min-content max-content; /* Filas según contenido */
  }

  1

  2

  3

  4

  5

  6

  .grid-template-example4 {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Columnas responsivas */
      gap: 10px;
  }

• Unidades y Funciones para grid-template-columns y grid-template-rows:

  • fr (fracción): Representa una fracción del espacio disponible en el contenedor grid. Es una unidad *flexible*.
    1 (1fr)

    2 (2fr)

    3 (1fr)

    .grid-fr-example {
        grid-template-columns: 1fr 2fr 1fr;
        gap: 15px;
    }

  • repeat(): Permite repetir un patrón de pistas varias veces.
    1

    2

    3

    4

    5

    6

    .grid-repeat-example {
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(2, 50px);
    }

  • auto-fit y auto-fill: Se usan para crear un número flexible de pistas.

    Ejemplo de auto-fit:

    1

    2

    3

    .grid-repeat-auto-fit {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 10px;
    }