w3.unpo<code>todo

A veces necesitamos definir la posición y la extensión de un elemento ( ítem ) dentro del contenedor grid.  Por ejemplo para decir que el elemento se sitúa entre la segunda y la tercera línea vertical y entre la segunda y la tercera línea horizontal tenemos que escribir estas reglas:

.item{
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

Podemos escribir lo mismo utilizando solo dos líneas de código:

.item{
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

En estos ejemplos los números utilizados son los nombres de las líneas verticales y horizontales definidas con grid-template-columns y/o grid-template-rows.

See the Pen grid-column grid-row by Gabi (@enxaneta) on CodePen.

Tanbién podemos utilizar la palabra clave span ( se extiende ). Por ejemplo span 1 quiere decir que el ítem se extiende exactamente una celda, fuera el que fuera el tamaño de esta.

.item{
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
}

Todavía más: podemos escribirlo todo utilizando una sola línea de código. Pero para esto necesitamos utilizar otra propiedad: grid-area.

La propiedad grid-area es una manera abreviada para definir la posición y la extensión de un ítem dentro del contenedor grid. La sintaxis es la siguiente:

.item{
	grid-area: <grid-row-start> / <grid-column-start> / < grid-row-end> / < grid-column-end>
}

O sea: podemos tomar esto:

.item{
  grid-row-start: 2;
  grid-column-start: 2;
  grid-row-end: 3;
  grid-column-end: span 3;
  }

Y transformarlo en esto:

.item{
  grid-area: 2 / 2 / 3 / span 3;
}

See the Pen grid-area by Gabi (@enxaneta) on CodePen.

Pero la propiedad grid-area puede tener una sintaxis alternativa:

.item{
  grid-area: el-nombre-de-una-area;
}

Vuelve a leer acerca de la propiedad grid-template-areas.

Tanto justify-self como align-self son propiedades de los ítems ( NO del contenedor ) grid, y se utilizan para alinear los elementos relativo al eje de la fila ( justify-self ) o de la columna ( align-self ).

Los valores que pueden tomar estas dos propiedades son:

align-self: start | end | center | stretch;

justify-self: start: alinea el contenido del elemento a la izquierda.
align-self: start: alinea el contenido del elemento a la parte superior.

justify-self: end: alinea el contenido del elemento a la derecha.
align-self: end: alinea el contenido del elemento a la parte inferior.

justify-self: center
align-self: center: alinea el contenido del elemento en el centro.

justify-self: stretch
align-self: stretch: el contenido aparece estirado ( stretched ) para ocupar todo el espacio.

Lea más acerca de las palabras clave start y end

See the Pen Grid justify-self & align-self by Gabi (@enxaneta) on CodePen.

Los ítems de un contenedor grid, como todos los elementos HTML aparecen en el mismo orden que en el código. Podemos alterar este orden utilizando la propiedad order.
Por defecto los elementos no tienen definido un order ( orden ). Si definimos el atributo order ="1" para un ítem cualquiera, este aparecerá en la última posición dentro de la caja, ya que 1 es más grande que nada.

En el siguiente ejemplo primero definimos el orden para cada elemento del grid: el primer ítem: order:1; el segundo ítem: order:2 . . . etc.

var items = document.querySelectorAll("#cuadricula .item");
  for(var i = 0; i < items.length; i++){
    items[i].style.order = i+1;
  }

Cada vez que el input type="number" cambia, el valor del atributo order del primer ítem cambia también, y por lo tanto cambia también la posición de este.

orderInput.addEventListener("input", function(){
    items[0].style.order = orderInput.value;
  },false);

See the Pen GRID order by Gabi (@enxaneta) on CodePen.