Propiedades de los ítems grid

facebook-svg gplus-svg twitter-svg

En todos los ejemplos que vienen a continuación no voy a utilizar prefijos, sin embargo, en el javascript hay instalada prefixfree.js, una librería que automáticamente añade prefijos en el CSS.

Propiedad Posibles valores Descripción
grid-column-start
grid-column-end
grid-row-start
grid-row-end:
el nombre o el número de la línea Definen la posición y la extensión de un elemento (ítem) dentro del contenedor grid.
grid-column
grid-row
grid-row: grid-row-start/grid-row-end;
grid-column: grid-column-start/grid-column-end;
Declaraciones abreviadas para grid-row-start/grid-row-end, y grid-column-start/grid-column-end respectivamente.
grid-area grid-area: grid-row-start / grid-column-start /
grid-row-end / grid-column-end;
Otra manera abreviada de definir la posición y la extensión de un ítem dentro del contenedor grid
justify-self
align-self
start | end | center | stretch; se utilizan para alinear los elementos relativo al eje de la fila (justify-self) o de la columna (align-self).
order número integro Define el orden para los ítems del grid

Las propiedades grid-column y grid-row
( dos propiedades de los ítems grid )

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
( una propiedad de los ítems grid )

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.

Las propiedades justify-self y align-self
( dos propiedades de los ítems grid )

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.

La propiedad order
( una propiedad de los ítems grid )

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.