Definición de filas y columnas

3.1 Propiedad grid-template-columns

CSS Grid Layout permite crear diseños complejos de páginas web usando filas y columnas. Dos propiedades clave para definir la estructura de la grid son grid-template-rows y grid-template-columns. Estas propiedades permiten establecer el número y tamaño de las filas y columnas en el contenedor de Grid, dando a los desarrolladores control total sobre la disposición de los elementos.

La propiedad grid-template-columns define el número y tamaño de las columnas en la grid. Acepta uno o más valores, que pueden especificarse en diferentes unidades de medida, como píxeles (px), porcentajes (%), unidades de fracción (fr), y otras.

Ejemplo 1: Definiendo tamaños de columnas fijos

En este ejemplo, la grid consistirá de tres columnas. La primera columna tendrá un ancho de 100px, la segunda columna tendrá un ancho de 200px, y la tercera columna un ancho de 100px:

    
      .grid-container {
        display: grid;
        grid-template-columns: 100px 200px 100px; /* Tres columnas con tamaños fijos */
      }
    
  

Ejemplo 2: Uso de unidades de fracción (fr)

En este ejemplo, la grid consistirá de tres columnas. La primera y la tercera columnas ocuparán la misma cantidad de espacio, y la segunda columna será el doble de ancha que cada una de ellas:

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr; /* Tres columnas con tamaños flexibles */
      }
    
  

Ejemplo 3: Uso de repetición (repeat)

En este ejemplo se utiliza la función repeat, lo que permite simplificar la declaración. La grid consistirá de tres columnas de igual ancho:

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

Ejemplo 4: Definiendo tamaños mínimos y máximos (minmax)

En este ejemplo, cada una de las tres columnas tendrá un ancho mínimo de 100px y un tamaño flexible que puede aumentar hasta 1fr según el espacio disponible:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, minmax(100px, 1fr)); /* Tres columnas con ancho mínimo de 100px y tamaños flexibles */
      }
    
  

3.2 Propiedad grid-template-rows

La propiedad grid-template-rows es similar a grid-template-columns, pero define el número y tamaño de las filas en la grid. También acepta uno o más valores que pueden especificarse en diferentes unidades de medida.

Ejemplo 1: Definiendo tamaños de filas fijos

En este ejemplo, la grid consistirá de tres filas. La primera fila tendrá una altura de 50px, la segunda fila tendrá una altura de 100px, y la tercera fila tendrá una altura de 50px:

    
      .grid-container {
        display: grid;
        grid-template-rows: 50px 100px 50px; /* Tres filas con tamaños fijos */
      }
    
  

Ejemplo 2: Uso de unidades de fracción (fr)

En este ejemplo, la grid consistirá de tres filas. La primera y la tercera filas ocuparán la misma cantidad de espacio, y la segunda fila será el doble de alta que cada una de ellas:

    
      .grid-container {
        display: grid;
        grid-template-rows: 1fr 2fr 1fr; /* Tres filas con tamaños flexibles */
      }
    
  

Ejemplo 3: Uso de repetición (repeat)

En este ejemplo se utiliza la función repeat, lo que permite simplificar la declaración. La grid consistirá de tres filas de igual altura:

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

Ejemplo 4: Definiendo tamaños mínimos y máximos (minmax)

En este ejemplo, cada una de las tres filas tendrá una altura mínima de 50px y un tamaño flexible que puede aumentar hasta 1fr según el espacio disponible:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, minmax(50px, 1fr)); /* Tres filas con altura mínima de 50px y tamaños flexibles */
      }
    
  

3.3 Combinación de propiedades

Combinación de propiedades grid-template-rows y grid-template-columns

Estas propiedades pueden usarse juntas para crear grids complejas con diferentes tamaños de filas y columnas.

En este ejemplo, la grid consistirá de dos columnas: la primera columna ocupará 1 parte del espacio disponible, y la segunda columna — 2 partes. La grid también consistirá de dos filas: la primera fila tendrá una altura de 100px, y la segunda fila tendrá una altura de 200px.

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 100px 200px;
      }
    
  

Ejemplo de implementación completa:

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 100px 200px;
        gap: 10px;
      }

      .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 CSS Grid</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item">Elemento 1</div>
            <div class="grid-item">Elemento 2</div>
            <div class="grid-item">Elemento 3</div>
            <div class="grid-item">Elemento 4</div>
          </div>
        </body>
      </html>
    
  

Explicación del código:

• .grid-container: define el contenedor como un grid container con dos columnas y dos filas. Los espacios entre los elementos se establecen usando la propiedad gap
• .grid-item: define estilos básicos para los elementos en la grid, tales como el color de fondo, el color del texto, el relleno, la alineación del texto y el borde