Contar líneas de cuadrícula en lugar de celdas ocupadas
Leer el objetivo de riego del nivel, luego identificar las líneas que delimitan el área deseada. La ubicación de la cuadrícula se describe con límites y pistas; un número de línea no es simplemente el número de una celda coloreada. Antes de ingresar a CSS, señale los límites de inicio y fin que desee. Esa pequeña distinción hace que sea más fácil predecir el área que cubrirá una regla en lugar de descubrirla sólo después de que el agua se mueva.
Cuando una tarea utiliza un tramo, piensa en cuántas pistas debe cubrir el área. No traduzca eso directamente a distancia de píxeles ni reutilice una regla de alineación de flexbox simplemente porque ambos juegos involucran CSS. Ingrese un cambio en el editor, observe el área regada y compárela con las zanahorias u otros objetivos especificados por el nivel. La tarea actual decide lo que se considera éxito; un área visualmente amplia no es automáticamente la solución prevista.
Utiliza la forma del resultado para diagnosticar la regla
Si la región regada comienza en el lugar equivocado, inspeccionar el límite inicial elegido. Si comienza correctamente pero termina demasiado pronto o demasiado tarde, inspeccione el final o el tramo. Si cambia en la dirección incorrecta, verifique qué propiedad de fila o columna utilizó. Nombrar el error geométrico le brinda una próxima edición precisa y ayuda a evitar reemplazar varias partes correctas de la regla a la vez.
Después de un intento exitoso, explica qué líneas encerraban el objetivo y cómo las seleccionó la regla. Esa explicación se lleva a cabo mejor que una cadena de respuestas desconectada porque los niveles posteriores pueden usar una cuadrícula diferente o combinar restricciones. Este centro apoya el jardín CSS interactivo real y sus instrucciones de nivel. No promete un tutorial de diseño basado en píxeles, una certificación externa o una hoja de respuestas completa probada en cada versión. Utilice la página de reproducción para los controles del editor, luego regrese aquí cuando desee una forma enfocada de revisar un error de posicionamiento.
Por ejemplo, si el agua cubre un track de más, marca el límite final deseado y compáralo con el valor o intervalo que ingresaste. Mantenga el inicio correcto sin cambios mientras revisa el final. Si el resultado se mueve a una fila diferente, inspeccione la regla de fila por separado de la regla de columna. Cuando el objetivo esté cubierto correctamente, describa los límites y las pistas con palabras. El ejercicio consiste en conectar la ubicación de CSS con la cuadrícula visible, lo cual es útil en una nueva disposición donde la cadena de respuesta anterior ya no selecciona el área deseada.
Consejos y estrategia para la Grid Garden
Marca un consejo para practicar en tu próxima partida. Esta lista no modifica el juego ni guarda tu progreso.
Preguntas y respuestas sobre el Grid Garden
¿Qué tema enseña Grid Garden?
Proporciona práctica interactiva con la cuadrícula CSS a través de rompecabezas de diseño de jardines.
¿Puedo controlar a un personaje en movimiento?
No. La interacción principal es ingresar CSS que cambia la posición de la cuadrícula.
¿Cuál es la fuente original?
El archivo Grid Garden de Thomas Park proporciona el código fuente con licencia MIT y la ilustración CC BY 3.0 utilizada en esta edición revisada.
¿Empezar en la línea 2 y terminar en la 4 cubre cuatro celdas?
No. grid-column-start: 2 y grid-column-end: 4 seleccionan el espacio entre las líneas 2 y 4: dos pistas de columna. La línea final es un límite, no otra celda regada. Cuenta los intervalos o usa span 2 y comprueba la zona resaltada antes de cambiar también la fila.
Controles e instrucciones completas
Controles e instrucciones completas
Jugar a Grid Garden