Regando tu jardín

Regando tu jardÍn con CSS

Girl Tech Fest México 2020 Actividad de rally

Índice

Bienvenida

SPAN

El jardÍn

GRID-COLUMN

GRID

ROW

COLUMN

Grid-row-start

grid-column-start

grid-row

GRID-COLUMN-END

gracias

¡Bienvenida!

En esta misión ayudaremos a Don Conejo a regar sus zanahorias que están sembradas en el huerto de su jardín

¿Lo ayudamos?

Conozcamos su jardín

El huerto de Don Conejo esta en:

http://cssgridgarden.com/#es

¿Qué te parece? ¿No es hermoso?

¿qué haremos?

Por medio de instrucciones en código podremos:

• Vertir agua que harán crecer a las zanahorias
• O administrar veneno para matar a las hierbas malas

¡Pero primero debemo conocer como posicionarnos en la ubicación que deseamos del huerto !

Fíjate en cómo el terreno esta cuadriculado, esto en inglés se conoce como "grid".

¿Cómo nos posicionamos?

Podemos tener una ubicación indicando el número de la columna que deseamos (en inglés se escribe "column"):

1 2 3 4 5 6 Column

¡Observa que la posición es un punto en específico de la casilla y no es la casilla completa!

¡Es como si no conocieran el número cero (0)!

-6 -5 -4 -3 -2 -1 Column

Pero también podemos señalar una posición por medio de un número con signo negativo.

¿Qué instrucciones utilizaremos?

Imaginemos que deseamos pedirle que riegue una casilla (en inglés "water"). Lo primero es ubicarnos en la casilla, esto lo hacemos utilizando con la instrucción "grid-column-start".

• Esta instrucción significa ponerte al inicio de una columna.

Por ejemplo: grid-column-start : 3;

1 2 3

• Pero si utilizamos un número negativo cambiará la ubicación.

Por ejemplo: grid-column-start : -3;

-3 - 2 -1

¿Qué instrucciones utilizaremos?

Si desemos regar un grupo de casillas, debemos indicar aparte del punto de inicio con "grid-column-start", señalar la ubicación final; para lograrlo utilizaremos "grid-column-end":

• Significa terminar en un punto de la columna indiciada.

Por ejemplo: grid-column-start : 1;grid-column-end: 3;

1 2 3

Bloque regado

• Pero observa qué pasa cuando usamos un número en negativo, por ejemplo:

grid-column-start : 1;grid-column-end: -3;

Bloque regado

-3 - 2 -1

¿Qué instrucciones utilizaremos?

También podemos decir el número de columnas que deseamos que se rieguen con la instrucción de "span" (que significa abarcar).

• grid-column-end: span --> después de poner la palabra "span" deberás indicar el número de columnas que debe abarcar. Por ejemplo:

grid-column-start : 1;grid-column-end: span 3;

Bloque regado = span 3

¿Qué instrucciones utilizaremos?

Pero la instrucción de "span" (que significa abarcar) no solo la puedes utilizar con "grid-column-end", también la puedes usar con "grid-column-start". Observa el siguiente ejemplo:

• grid-column-start: span --> de igual manera deberás colocar después de poner span el número de columans que debe abarcar. Por ejemplo:

grid-column-start : span 3;grid-column-end: 5;

1 2 3 4 5

Bloque regado = span 3

¿Qué instrucciones utilizaremos?

Es tan inteligente el sistema que puedes simplemente indicar los números de las casillas que quieres que se abarquen de la siguiente forma:

• grid-column --> debemos colocar dos números separados por "/", el primero será "start" (el inicio) y el segundo será "end" (final). Por ejemplo:

grid-column: 2/3;

2 3

Esta instrucción también se puede combinar con la de "span" de la siguiente forma:

grid-column: 2/ span 3;

Bloque regado = span 3

OTRA FORMA DE posicionarnos

Si has notado nuestro huerto también tiene columnas, pero también tienen renglones (que en inglés se escribe "row") y de igual forma podemos señalar una posición con números positivos o negativos de la siguiente manera:

Row

-6 -5 -4 -3 -2 -1

1 2 3 4 5 6

Row

¡Observa que la posición es un punto en específico de la casilla y no es la casilla completa!

¡ Recuerda que no hay número cero (0)!

¿Qué instrucciones utilizaremos?

Si deseamos regar una casilla que esta en la primera columna pero en un reglon diferente al 1, podemos usar la instrucción de "grid-row-start".

• Recuerda que si utilizas un número negativo cambiará la ubicación.

• Esta instrucción significa ponerte al inico de un renglón

Por ejemplo: grid-column-start : 3;

grid-column-start : -3;

1 2 3

-3 -2 -1

¿Qué instrucciones utilizaremos?

Recuerda que el sistema es muy inteligente, tanto que si únicamente usas la instrucción "grid-row" puedes colocar dos números separados por "/", donde el primero será "start" (el inicio) y el segundo será "end" (final).

• Incluso puedes utilizar "span" (que significa abarcar).

• Por ejemplo:

grid-row: 2/3;

grid-row: 2/ span 3;

2 3

Bloque regado

iniciemos

Teniendo en mente las recomendaciones que hemos revisado sobre cómo deberás utilizar las instrucciones:

• grid-column-start: 3;
• grid-column-start: span 3;
• grid-column-end: 3;
• grid-column-end: span 3;
• grid-column: 2/4;
• grid-column: 2/ span 4;
• grid-row-start: 3;
• grid-row-start: span 3;

Regresa a la página donde esta el jardín de Don Conejo y sigue las instrucciones de "GRID GARDEN"

http://cssgridgarden.com/#es

Nota: Asegurate que la página se encuentra en idioma Español para seguir las instrucciones

¡Y no olvides compartirnos la evidencia, es decir una imagen del nivel que has alcanzado!

¡GRACIAS!

Esperamos te hayas divertido aprendiendo