Grid Garden CSS Grid Exercises

URL: https://cssgridgarden.com/.

Los ejemplos que aquí se muestran, están realizados en un grid de 5x5 con un 20% de anchura.

Regar una zona (posicionar una columna)

Para poner en un elemento (en este caso en el ejemplo lo pone como regar) en una cuadrícula de 5x5, en la tercera columna vertical (3c:1f):

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column-start: 3;
}

Ponemos el grid-column-start: 3; para posicionarlo en el 3c:1f.

Regar varias zonas

Cuando grid-column-start se usa solo, la expansión por defecto del elemento en la cuadrícula será exactamente una columna. No obstante, puedes extender el elemento varias columnas añadiendo la propiedad grid-column-end. En este caso no contaremos columnas, sinó los bordes de los vertices, así que en este caso en vez de 3 serán 4.

Vamos a regar desde 1c:1f hasta 1c:f3:

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column-start: 1;
  grid-column-end: 4;
}

Al emparejar grid-column-start y grid-column-end, podrías asumir que el valor final tiene que ser mayor que el valor iniciar. ¡Pero no es el caso!.

Aquí regaremos un vértice que está en 4c:f1 hasta 2c:f1:

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column-start: 5;
  grid-column-end: 2;
}

Si prefieres contar las líneas de la cuadrícula comenzando por la derecha, puedes dar a grid-column-start y grid-column-end valores negativos. Por ejemplo, puedes establecerlos a -1 para indicar la primera línea comenzando por la derecha.

Si queremos "regar" desde 1c:f1 a 4c:f1:

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column-start: 1;
  grid-column-end: -2;
}

Podemos usar valores negativos en vez de positivos para posicionarnos.

Expandir sin decir principio y fin

En lugar de definir un elemento en la cuadrícula basado en la posicion inicial y final, puedes definirlo basado en la longitud de columnas deseada usando la palabra clave span. Ten presente que span solo funciona con valores positivos.

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column-start: 2;
  grid-column-end: span 2;
}

También puedes usar la palabra clave span con grid-column-start para establecer la anchura del elemento en relación a la posición final.

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column-start: span 3;
  grid-column-end: 6;
}

Abreviar inicio y fin

Escribir ambos grid-column-start y grid-column-end cada vez puede resultar cansado. Afortunadamente, grid-column es una propiedad abreviada que acepta ambos valores a la vez, separados por una barra oblicua.

Para regar las dos últimas filas (de 4c:f1 a 5c:f1):

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column: 4/6;
}

Podemos usar también span dentro de grid-column. Si queremos regar una zona que abarque 2c:f1 hasta 4c:f1 lo haríamos de la siguiente forma:

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column: 2/span 3;
}

Regar por filas

Una de las cosas que diferencia las cuadrículas de CSS de flexbox es que puedes posicionar los elementos fácilmente en 2 dimensiones: columnas y filas. grid-row-start funciona de manera semejante a grid-column-start pero a lo largo del eje vertical.

Si queremos regalar la 1c:3f se haría así:

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-row-start: 3;
}

Podemos usarlo de forma abreviada. Si queremos regar 1c:f3 hasta 1c:5f:

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-row: 3/-1;
}

Podemos combinar el uso de grid-column junto a grid-row. Si queremos regar el elemento que está en 2c:f5:

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#poison {
  grid-column: 2;
  grid-row: 5;
}

Podemos también "regar" zonas extensas. En este caso queremos que toda la primera columan no esté "regada" y el resto si:

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column: 2/6;
  grid-row: 1/6;
}

Abreviación para regar

Si escribir grid-column y grid-row se te hace demasiado pesado, aquí tienes otra propiedad abreviada. grid-area admite cuatro valores separados por barras oblicuas: grid-row-start, grid-column-start, grid-row-end, seguido de grid-column-end.

Un ejemplo de esto podría ser grid-area: 1 / 1 / 3 / 6;.

Si queremos regar una zona que abarque 2c a 5c y de `f1 a f3':

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-area: 1 / 2 / 4 / 7;
}

Regar zonas que no sean cuadradas

Podemos definir una segunda área para poder regar varias zonas:

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water-1 {
  grid-area: 1 / 4 / 6 / 5;
}

#water-2 {
  grid-area: 2 / 3 / 5 / 6;
}

Usando order para regar

Si los elementos de la cuadrícula no se sitúan explícitamente con grid-area, grid-column, grid-row, etc., se sitúan automáticamente de acuerdo al orden en el código fuente. Puedes sobrescribir esto usando la propiedad order, que es una de las ventajas de la cuadrícula frente al diseño basado en tablas.

Por defecto, el valor de order de todos los elementos es igual a 0, pero puede ser establecido a cualquier valor positivo o negativo, de manera similar a z-index.

Si queremos que empiece #poison en la columna 5:

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

.water {
  order: 0;
}

#poison {
  order: 1;
}

Dimensiones del terreno

Hasta este momento, has tenido un jardín formado por cinco columnas, cada una ocupando el 20% de la anchura total, y cinco filas, cada una ocupando el 20% de la altura total.

Esto ha sido establecido con las propiedades grid-template-columns: 20% 20% 20% 20% 20%; y grid-template-rows: 20% 20% 20% 20% 20%;. Cada propiedad tiene cinco valores que crean cinco columnas, cada una establecida al 20% de la anchura total del jardín.

Pero puedes establecer los valores en la cuadrícula como quieras. Da a grid-template-columns un nuevo valor para regar tus zanahorias. Querrás que la anchura de la primera columna sea del 50%.

#garden {
  display: grid;

grid-template-columns: 50%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column: 1;
  grid-row: 1;
}

Repeat

Especificar un puñado de columnas con la misma anchura puede ser aburrido. Afortunadamente hay una función repeat que te ayudará con eso.

Por ejemplo, previamente hemos definido cinco columnas al 20% de anchura mediante grid-template-columns: 20% 20% 20% 20% 20%;. Esto puedes simplificarse como grid-template-columns: repeat(5, 20%);.

Usando grid-template-columns con la función repeat, crea ocho columnas, cada una con una anchura del 12.5%. De esta manera no inundarás tu jardín.

#garden {
  display: grid;

grid-template-columns: repeat(5,12.5%);
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column: 1;
  grid-row: 1;
}

repeat también acepta valores como son pixels y ems e incluso mezclarlos.

Medida fr

CSS Grid también introduce una nueva medida, la fracción fr. Cada unidad fr asigna una porción del espacio disponible. Por ejemplo, si dos elementos están establecidos a 1fr y 3fr respectivamente el espacio se divide en 4 porciones iguales; el primer elemento ocupa 1/4 del espacio y el segundo elemento los 3/4 restantes.

Ahora las malas hierbas ocupan 1/6 de tu primera fila y las zanahorias los restantes 5/6. Crea dos columnas con ese ancho empleando fr.

#garden {
  display: grid;

grid-template-columns: 1fr 5fr;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

Cuando algunas columnas son establecidas en píxeles, porcentajes o ems, cualquier otra columna establecida con fr dividirá el espacio restante.

Aquí las zanahorias forman una columna de 50 píxeles a la izquierda, y las malas hierbas una columna de 50 píxeles a la derecha. Mediante grid-template-columns, crea esas dos columnas y usa fr para crear tres columnas más en el espacio que queda entre ellas.

#garden {
  display: grid;
  grid-template-columns: 50px 1fr 1fr 1fr 50px;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-area: 1 / 1 / 6 / 2;
}

#poison {
  grid-area: 1 / 5 / 6 / 6;
}

Ahora hay una columna de malas hierbas de 75 píxeles en el lado izquierdo del jardín. En 3/5 del espacio restante crecen zanahorias, mientras que los 2/5 restantes han sido invadidos por malas hierbas.

Usa grid-template-columns con una combinación de px y fr para crear las columnas necesarias.

#garden {
  display: grid;
  grid-template-columns: 75px 3fr 2fr;
  grid-template-rows: 100%;
}

grid-template-rows funciona exactamente igual que grid-template-columns.

Abreviar grid-template

grid-template es una propiedad abreviada que combina grid-template-rows y grid-template-columns.

Por ejemplo, grid-template: 50% 50% / 200px; creará una cuadrícula con dos filas que ocuparán el 50% del alto cada una, y una columna que será 200 píxeles de ancho.

mrcodedev/GridGardenCSSGrid.md