Grid - cristhian-cz/doc_development GitHub Wiki

Grid garden 1)nivel 1 Usamos grid-column-start:3 para ubicar de izquierda a derecha el tercer puesto

2)nivel 2 Usamos grid-column-start:5 para envenenar las hierbas que se encuentran en la quinta posición

3)nivel 3 Usamos grid-column-end:4 para extender el agua 3 veces a la derecha del jardín

4)nivel 4 Usamos grid-column-end:2 para extender el agua tres veces desde la segunda casilla hasta la cuarta en el jardín

5)nivel 5 Usamos grid-column-end:-2 para darle valores negativos hasta el segundo pundo le indicamos al array que terminara en la casilla total restándole 2

6)nivel 6 Usamos grid-column-start:-3 para establecer un valor negativo y cuenta devolviendo y cuando pasa al nivel cero le da la vuelta al array del jardín

7)nivel 7 Usamos grid-column-end:span 2 con span solo valores positivos para indicar desde la posición inicial a donde queremos llegar

8)nivel 8 Usamos grid-column-end:span 5 para finalizar hasta la posición 5 con span y regar las zanahorias

9)nivel 9 Usamos grid-column-start:span 3 para establecer la anchura del elemento con respecto a la posición final.

10)nivel 10 Usamos grid-column:4/6 para establecer el inicio de la posición desde la posición 4 y vamos hasta el 6.

11)nivel 11 Usamos grid-column:2/span 3 para combinar span y llegar hasta la posición 3 del array

12)nivel 12 Usamos grid-row-start:3 para ir de manera vertical a la posición 3 del array

13)nivel 13 Usamos grid-row:3/6 para ir de la posición 3 hasta la 6 verticalmente

14)nivel 14 Usamos grid-column:2 para indicar la posición de la columna 2 y grid-row:5; para posicionarlo en la fila 5.

15)nivel 15 Usamos grid-column:2/span 4 para abarcar desde la posición 2 hasta la 4 de la columna y grid-row:1/span 5 para abarcr hasta la fila 5

16)nivel 16 Usamos grid-area: 1/2/span 3/span 4; para abreviar el código y expandir el área apartir de la columna 2 hasta la fila 3

17)nivel 17 Usamos grid-area:2/3/span 3/span 3 para cubrir las zonas faltantes

18)nivel 18 Usamos order:1 para ir a posicionar un elemento de acuerdo a su posición en el array

19)nivel 19 Usamos order:-1 para cambiar el orden del veneno en el jardín

20)nivel 20 Usamos grid-template-columns:50% para establecer el ancho de las columnas

21)nivel 21 Usamos grid-template-columns:repeat(8,12.5%) para aumentar las columnas a 8 con un 12.5%

22)nivel 22 Usamos grid-template-columns:100px 3em 40% para darle un tamaño en diferente formar como porcentaje em y pixeles

23)nivel 23 Usamos grid-template-columns:1fr 5fr para probar la unidad de medidad fr para separa las malas hierbas

24)nivel 24 Usamos grid-template-columns:50px repeat(3,1fr)50px para repetir tres veces a una fracion de la mitad.

25)nivel 25 Usamos grid-template-columns:75px 3fr 2fr para obtener la tercera parte de las zanahoria y el resto para las 2/5 parte de las venenosas.

26)nivel 26 Usamos grid-template-rows:repeat(4,12.5px) 1fr para crear la 5 filas y regar el resto de zanahorias

27)nivel 27 Usamos grid-template:60%/200px con el 60% de la parte superio y el tamaño de 200 px

28)nivel 28 Usamos grid-template:1fr 50px/20% 80% para sacar el 20 %del lado izquierdo de la yerbas malas y usamos el resto 80% para las zanahorias