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 image

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

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

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 image

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 image

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 image

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 image

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

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

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. image

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

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

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

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. image

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 image

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 image

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

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

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

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

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

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

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

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

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. image

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

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

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 image