Contar linhas de grade em vez de células ocupadas
Leia a meta de irrigação do nível, em seguida identifique as linhas que delimitam a área pretendida. A colocação da grade é descrita com limites e trilhas; um número de linha não é simplesmente o número de uma célula colorida. Antes de inserir CSS, aponte para os limites inicial e final desejados. Essa pequena distinção torna mais fácil prever a área que uma regra cobrirá, em vez de descobri-la somente após o movimento da água.
Quando uma tarefa usa um span, pense em quantas trilhas a área deve cobrir. Não traduza isso diretamente em distância de pixel ou reutilize uma regra de alinhamento de flexbox apenas porque ambos os jogos envolvem CSS. Insira uma alteração no editor, observe a área regada e compare-a com as cenouras ou outros alvos especificados pelo nível. A tarefa atual decide o que conta como sucesso; uma área visualmente ampla não é automaticamente a solução pretendida.
Use o formato do resultado para diagnosticar a regra
Caso a região regada comece no local errado, inspecione o limite inicial escolhido. Se começar corretamente, mas terminar muito cedo ou muito tarde, inspecione o final ou o vão. Se mudar na direção errada, verifique qual propriedade de linha ou coluna você usou. Nomear o erro geométrico fornece uma próxima edição precisa e ajuda a evitar a substituição de várias partes corretas da regra de uma só vez.
Após uma tentativa bem-sucedida, explique quais linhas delimitavam o alvo e como a regra as selecionou. Essa explicação é melhor transportada do que uma sequência de respostas desconectada porque os níveis posteriores podem usar uma grade diferente ou combinar restrições. Este centro suporta o próprio jardim interativo CSS e suas instruções de nível. Ele não promete um tutorial de layout baseado em pixels, uma certificação externa ou uma folha de respostas completa testada em todas as versões. Use a página de reprodução para os controles do editor e retorne aqui quando desejar uma maneira focada de revisar um erro de posicionamento.
Por exemplo, se a água cobrir uma trilha demais, marque o limite final desejado e compare-o com o valor ou extensão que você inseriu. Mantenha o início correto inalterado enquanto revisa o final. Se o resultado for movido para uma linha diferente, inspecione a regra da linha separadamente da regra da coluna. Quando o alvo for percorrido corretamente, descreva os limites e as trilhas em palavras. O exercício consiste em conectar o posicionamento CSS com a grade visível, o que é útil em um novo arranjo onde a sequência de resposta anterior não seleciona mais a área pretendida.
Dicas e estratégia para Grid Garden
Marque uma dica para praticar na próxima partida. Esta lista não altera o jogo nem salva seu progresso.
Perguntas e respostas sobre Grid Garden
Que assunto Grid Garden ensina?
Proporciona prática interativa com a grade CSS por meio de quebra-cabeças de layout de jardim.
Eu controlo um personagem em movimento?
Não. A principal interação é a entrada em CSS, que altera o posicionamento na grade.
Qual é a fonte original?
O arquivo Thomas Park, de autoria de Grid Garden, fornece o código-fonte licenciado sob a licença MIT, e o arquivo CC BY 3.0 contém as ilustrações utilizadas nesta edição analisada.
Começar na linha 2 e terminar na 4 cobre quatro células?
Não. grid-column-start: 2 e grid-column-end: 4 selecionam o espaço entre as linhas 2 e 4: duas trilhas de coluna. A linha final é um limite, não outra célula regada. Conte os intervalos ou use span 2 e confira o destaque antes de alterar também a posição da linha.
Controles e instruções completas
Controles e instruções completas
Jogar Grid Garden