Tuntuu siltä, että CSS Grid on tullut jo pitkään, mutta juuri nyt näyttää olevan pääsemässä pisteeseen, jossa ihmiset puhuvat yhä enemmän siitä ja että siitä on tulossa jotain, mitä meidän pitäisi oppia. Aloin lukea muutama viesti ja leikkiä syntaksilla parin viime viikon aikana, mutta pyysin kollegaani CSS-Trickster Miriam Suzannea kävelemään sen läpi kanssani video-hangoutissa.
Vietimme aikamme tönäisi CSS Gridin perusasioita ja opimme, että on paljon vähemmän pelottavaa aloittaa sen käyttö kuin kumpikaan meistä odotti. Aloitamme yksinkertaisella esimerkillä ja sitten nuudelimme tietä CSS Grid -ominaisuuksien läpi oppiakseen mitä muita asioita se pystyy käsittelemään menemättä liian pitkälle rikkaruohoihin.
Tässä on muutamia resursseja, jotka mainitsimme keskustelun aikana ja joihin on syytä linkittää:
- Täydellinen opas ruudukkoon - Kattava katsaus CSS Gridiin, mukaan lukien sen ominaisuudet ja tärkeiden termien ja käsitteiden sanasto.
- CodePen-esittely - Tämä on yksinkertainen esimerkki, josta aloitimme videossa ja edistyimme.
- CSS Grid ja Grid Highlighter - Tämä työkalu mainittiin loppupuolella, ja se tarjoaa tavan visualisoida Ruudukko-asettelu Firefox DevTools -ohjelmaa käyttämällä.