06. Grid con líneas nombradas

Gracias a Grid CSS también tenemos la posibilidad de usar «linenames», o lo que es lo mismo, ponerle nombre a las líneas de nuestro sistema grid. Vamos a verlo con un ejemplo, donde probablemente se vea mucho mejor. Creamos esta estructura HTML.

Ejm

    <div class="grid">
      <div class="header">Header</div>
      <div class="sidebar">Sidebar</div>
      <div class="content">Content</div>
      <div class="footer">Footer</div>
    </div>

Los nombres de las clases ya nos dan idea del contenido que tienen. Después, mediante Grid CSS le damos una estructura definida. Para ello, vamos a considerar los siguientes nombres para las lineas de nuestro grid, utilizando X para las posiciones en el eje X y utilizando Y para las posiciones en el eje Y.

Grid con lineas nombradas

Sabiendo esto, lo único que hay que hacer es indicar estos nombres entre corchetes, justo antes de la medida que establecimos como vimos en apartados anteriores. También se ha de colocar una nombre de línea final sin medida a continuación, que representa la línea final.

Ejm

    .grid {
      display: grid;
      grid-template-columns: [x0] 1fr [x1] 1fr [x2] 1fr [x3];
      grid-template-rows: [y0] 1fr [y1] 1fr [y2] 1fr [y3];
    }

En este caso, los nombres utilizados son tan sólo un ejemplo didáctico. Se pueden utilizar otros nombres quizás más amigables como top-line, top-medium-line, bottom-medium-line y bottom-line, por ejemplo, en lugar de y0, y1, y2 y y3 respectivamente.

Ahora, teniendo los nombres, sólo quedaría delimitar que zonas del grid queremos que ocupe cada uno de nuestros bloques <div> del grid. Para ello utilizaremos las propiedades grid-column-start, grid-column-end y grid-row-start, grid-row-end. También podriamos utilizar sus propiedades de atajo grid-column y grid-row.

Ejm

    .header {
      background: darkred;
      grid-column-start: x0;
      grid-column-end: x3;
      /* Equivalente a grid-column: x0 / x3; */
    }

    .sidebar {
      background: black;
      grid-row: y1 / y2;
      color: white;
    }

    .content {
      background: orange;
      grid-column: x1 / x3;
      grid-row: y1 / y3;
    }

    .footer {
      background: green;
      grid-column: x0 / x3;
      grid-row: y2;
    }

Hemos aplicado la siguiente estructura:

  • Zona .header desde la columna x0 a x3.
  • Zona .sidebar desde la fila y1 a y2.
  • Zona .content desde la columna x1 a x3 y desde la fila y1 a y3.
  • Zona .footer desde la columna x0 a x3 en la fila y2.

Nota: Ten en cuenta que sería necesario darle un tamaño de alto con height al contenedor padre para que el navegador sepa cuanto ocupará la estructura completa. También podemos modificar las medidas 1fr para dar menos proporción, por ejemplo utilizando en grid-template-rows un [y0] 0.5fr y un [y2] 0.25fr.

Scroll al inicio