Usar áreas en CSS Grid Layout

Usar áreas en CSS Grid Layout

Usar áreas en CSS Grid Layout

En el anterior artículo vimos los principios básicos de CSS Grid Layout. En este artículo vamos a terminar de profundizar en este nuevo sistema de layout; concretamente vamos a ver como funcionan las áreas y como alinear los elementos que forman el layoout.

Áreas de un Grid

Existe la posibilidad de indicar la posición de los elementos hijos sin necesidad de indicar los números o nombres de las líneas de la rejilla. Lo cual, dicho sea, resulta muy conveniente, ya que trabajar con números o nombres de líneas es poco intuitivo. Para ello tenemos que definir una serie de áreas con nombres.

Esta vez vamos a partir de un nuevo ejemplo. El código HTML sería el siguiente:

<div id="wrapper">
  <header>cabecera</header>
  <main>contenido</main>
  <aside>barra lateral</aside>
  <footer>pie de página</footer>
</div>

Y el código CSS va a ser el siguiente:

#wrapper {
  display: grid;
  max-width: 1000px;
  margin: 0 auto;
  min-height: 100vh; /* esto es para que como minimo
         ocupe la altura de la ventana del navegador */

  /* indicamos cuantas filas y columnas, y el nombre de cada área */
  grid-template-areas:
    "cabecera cabecera" /* primera fila */
    "contenido barra" /* segunda fila */
    "pie pie"; /* tercera fila */

  /* indicamos tamaños de las filas y columnas */
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 70% 30%;
}

/* a cada hijo le indicamos su área */
#header { grid-area: cabecera; }
main { grid-area: contenido; }
#footer { grid-area: pie; }
#sidebar { grid-area: barra; }

/* un poquito de aspecto */
#wrapper>* { padding: 10px; }
#header, #footer { background: black; color: white; }
#sidebar { background: gray; color: white; }

El resultado es el siguiente:

Áreas en CSS Grid Layout

Áreas en CSS Grid Layout

Con la propiedad CSS grid-template-areas podemos indicar una serie de cadenas de texto delimitadas por “comillas”. Cada cadena de texto representa una fila de la rejilla. Y después, cada palabra de la cadena de texto representa una columna. Por lo que estamos indicando de golpe cuantas filas, cuantas columnas y que nombres va a tener cada área de la rejilla. Obviamente, no podemos hacer un “Tetris” y las áreas han de ser rectangulares. Si queremos que alguna celda de la rejilla no pertenezca a ningún área debemos de indicar un punto.

La propiedad grid-template es una abreviatura que nos permite indicar todos los valores de golpe.

#wrapper {
  display: grid;
  max-width: 1000px;
  margin: 0 auto;
  min-height: 100vh;
  /* indicamos toda la rejilla de golpe */
  grid-template:
    "cabecera cabecera" auto /* primera fila + tamaño */
    "contenido barra" 1fr /* segunda fila + tamaño */
    "pie pie" auto /* tercera fila + tamaño */
    / 70% 30%; /* tamaños de las columnas */
}

En este caso, debemos de indicar una cadena de texto para cada fila seguida de su tamaño, después la barra / y finalmente los anchos de las columnas.

Otra abreviatura alternativa a grid-template es la propiedad CSS grid, aunque esta última permite indicar además otros valores relacionados con la forma en la que se organizan los elementos hijos de forma automática.

Lo bueno de usar áreas en lugar de números o nombres de líneas, es que hacer el responsive implica simplemente redefinir la rejilla.

/* responsive para pantallas pequeñas */
@media only screen and (max-width: 600px) {
  #wrapper {
    grid-template-areas:
      "cabecera" /* primera fila */
      "contenido" /* segunda fila */
      "barra" /* tercera fila */
      "pie"; /* cuarta fila */
      grid-template-rows: auto 1fr auto auto;
      grid-template-columns: 100%;
  }
}

¡Sin necesidad de modificar nada en los elementos hijos!

Alineamiento

Disponemos de una serie de propiedades CSS para alinear las celdas de la rejilla y otra serie de propiedades para alinear los hijos del Grid respecto al área de la rejilla que les ha sido asignada.

Para alinear las celdas de la rejilla disponemos de dos propiedades CSS:

  • justify-content – permite indicar como se han de distribuir las celdas de la rejilla en horizontal.
  • align-content – permite indicar como se han de distribuir las celdas de la rejilla en vertical.

Es muy importante resaltar que para poder alinear las celdas de la rejilla, es necesario que la rejilla no ocupe todo el ancho y/o alto del elemento padre. A modo de ejemplo, si la rejilla ocupa todo el ancho del elemento padre, no tiene sentido intentar centrar las celdas ya que ocupan todo el ancho; no se puede centrar horizontalmente algo que ocupa todo el ancho.

Ambas propiedades CSS aceptan los siguientes valores:

  • start – las celdas se alinearán a la izquierda o a la parte superior.
  • center – las celdas se centrarán.
  • end – las celdas se alinearán a la derecha o a la parte inferior.
  • stretch – las celdas se estirarán en horizontal o vertical hasta repartirse todo el espacio libre; es el valor por defecto. Es importante remarcar que solo tiene efecto si al definir el tamaño de las filas y columnas usamos auto.
  • space-between – distribuye las celdas horizontal o verticalmente repartiendo el espacio libre entre ellas; sin dejar espacio libre antes de la primera celda o después de la última celda.
  • space-around – igual al anterior, pero en este caso se añade la mitad de la cantidad de espacio que separa las celdas antes de la primera celda y después de la última.
  • space-evenly – igual al anterior pero deja la misma cantidad de separación al inicio y al final que entre las celdas.

Veamos un ejemplo:

<div id="wrapper">
  <div id="p1">1</div>
  <div id="p2">2</div>
  <div id="p3">3</div>
  <div id="p4">4</div>
</div>
#wrapper {
  display: grid;
  max-width: 1000px;
  margin: 0 auto;
  min-height: 100vh;
  /* 2 filas de 100px de anchoy 3 columnas de 100px de ancho */
  grid-template:
    "uno uno uno" 100px
    "dos tres cuatro" 100px
    / 100px100px100px;
  background: gray;
  border: 4px solid black;
  /* distribuir elementos en horizontal */
  justify-content: space-between;
  /* centrar rejilla en vertical */
  align-content: center;
}

#p1 { grid-area: uno; background: red; }
#p2 { grid-area: dos; background: green; }
#p3 { grid-area: tres; background: blue; }
#p4 { grid-area: cuatro; background: yellow; }

Es muy recomendable que pruebes a cambiar los valores de justify-content y align-content de este ejemplo y observes que sucede con cada posible valor.

Para alinear los hijos del elemento Grid disponemos de cuatro propiedades CSS:

  • justify-items – Indica cómo se alinean en horizontal los elementos hijos. Se aplica al elemento padre y afecta a todos los hijos.
  • justify-self – Indica cómo se alinean en horizontal los elementos hijos. Se aplica directamente a los elementos hijos.
  • align-items – Indica cómo se alinean en vertical los elementos hijos. Se aplica al elemento padre y afecta a todos los hijos.
  • align-self – Indica cómo se alinean en vertical los elementos hijos. Se aplica directamente a los elementos hijos.

Los posibles valores para estas propiedades son:

  • start – los elementos hijos se alineará a la izquierda o a la parte superior de la zona de la rejilla que les ha sido asignada.
  • end – los elementos hijos se alineará a la derecha o a la parte inferior de la zona de la rejilla que les ha sido asignada
  • center – los elementos hijos se centrarán horizontal o verticalmente respecto a la zona de la rejilla que les ha sido asignada
  • stretch – los elementos hijos ocuparán todo el ancho o alto de la zona de la rejilla que les ha sido asignada. Es el valor por defecto.

Prueba a añadir al ejemplo anterior el siguiente código CSS:

#wrapper{
  /* cada hijo del grid saldrá centrado en horizontal
     y en la parte inferior del área de la rejilla asignada */
  justify-items: center;
  align-items: end;
}

#p1{
  /* excepto en el caso del #p1 que saldrá ocupando todo el ancho
     y en la parte superior del área de la rejilla asignada */
  justify-self: stretch;
  align-self: start;
}

De nuevo es muy recomendable que pruebes a cambiar el valor de estas propiedades y observes el resultado de dichos cambios.

Y nada más. Hasta aquí esta serie de artículos sobre CSS Grid Layout. Espero que os haya resultado interesante este nuevo y versatil sistema de layout.

Escribe un comentario