Laske ruudukon rivit varattujen solujen sijaan
Lue tason kastelutavoite ja tunnista sitten viivat, jotka rajoittavat aiottua aluetta. Ruudukon sijoitus kuvataan rajoilla ja raiteilla; rivinumero ei ole vain värillisen solun numero. Ennen kuin kirjoitat CSS, osoita haluamasi alku- ja loppurajoja. Tämä pieni ero helpottaa säännön kattaman alueen ennustamista sen sijaan, että se löydettäisiin vasta veden liikkeen jälkeen.
Kun tehtävä käyttää jänneväliä, mieti kuinka monta raitaa alueen tulee kattaa. Älä käännä sitä suoraan pikselin etäisyydeksi tai käytä uudelleen flexbox-kohdistussääntöä vain siksi, että molemmat pelit sisältävät CSS. Syötä yksi muutos editoriin, tarkkaile kasteltua aluetta ja vertaa sitä porkkanoihin tai muihin tason määrittämiin kohteisiin. Nykyinen tehtävä päättää, mikä lasketaan onnistuneeksi; visuaalisesti laaja alue ei ole automaattisesti suunniteltu ratkaisu.
Käytä tuloksen muotoa säännön diagnosointiin
Jos kastelualue alkaa väärästä paikasta, tarkista valittu aloitusraja. Jos se alkaa oikein, mutta päättyy liian aikaisin tai liian myöhään, tarkasta pää tai jänne. Jos se muuttuu väärään suuntaan, tarkista mitä rivi- tai sarakeominaisuutta käytit. Geometrisen virheen nimeäminen antaa sinulle tarkan seuraavan muokkauksen ja auttaa välttämään useiden säännön oikeiden osien korvaamisen kerralla.
Selitä onnistuneen yrityksen jälkeen, mitkä rivit sisälsivät kohteen ja miten sääntö valitsi ne. Tämä selitys kulkee paremmin eteenpäin kuin irrotettu vastausmerkkijono, koska myöhemmät tasot voivat käyttää erilaista ruudukkoa tai yhdistää rajoituksia. Tämä keskus tukee varsinaista interaktiivista CSS puutarhaa ja sen tasoohjeita. Se ei lupaa pikselipohjaista asetteluopetusta, ulkoista sertifikaattia tai täydellistä vastauslomaketta, joka on testattu jokaisessa versiossa. Käytä toistosivua muokkaussäätimille ja palaa sitten tänne, kun haluat tarkennetun tavan tarkastella paikannusvirhettä.
Jos esimerkiksi vesi peittää yhden raidan liikaa, merkitse haluttu loppuraja ja vertaa sitä antamaasi arvoon tai jänneväliin. Pidä oikea alku ennallaan, kun tarkistat loppua. Jos tulos siirtyy toiselle riville, tarkista rivisääntö erillään sarakesäännöstä. Kun kohde on peitetty oikein, kuvaile rajat ja jäljet sanoin. Harjoituksena on yhdistää CSS sijoittelu näkyvään ruudukkoon, mikä on hyödyllistä uudessa järjestelyssä, jossa edellinen vastausmerkkijono ei enää valitse haluttua aluetta.
Grid Garden-vinkkejä ja -strategiaa
Valitse vinkki harjoiteltavaksi seuraavalla kierroksella. Tämä lista ei muuta peliä eikä tallenna pelin edistymistä.
Grid Garden-kysymykset ja vastaukset
Mitä aihetta Grid Garden opettaa?
Se tarjoaa interaktiivista harjoittelua CSS-ruudukon kanssa puutarha-asettelupulmien avulla.
Ohjaanko liikkuvaa hahmoa?
Ei. Tärkein toiminto on siirtyminen CSS:aan, mikä muuttaa ruudukon sijoittelua.
Mikä on alkuperäinen lähde?
Thomas Park:n Grid Garden tarjoaa tässä arvostellussa painoksessa käytetyn MIT-lisensoidun lähdekoodin ja CC BY 3.0:n kuvitukset.
Kattaako aloitusviiva 2 ja lopetusviiva 4 neljä solua?
Ei. grid-column-start: 2 ja grid-column-end: 4 valitsevat viivojen 2 ja 4 välin eli kaksi sarakerataa. Lopetusviiva on raja, ei ylimääräinen kasteltu solu. Laske välit tai käytä span 2 ja tarkista korostus ennen rivisijainnin muuttamista.