## Tehtävä
Täydennä HTML-rakenne lisäämällä puuttuvat Tailwind CSS -luokat, jotta asettelun vaatimukset täyttyvät.
- **Grid-kontaineri**: Määritä ruudukko, jossa on kolme saraketta ja 1 rem (16px) väli rivien välillä;
- **Ensimmäinen elementti**: Ulottuu kahden sarakkeen yli;
- **Toinen elementti**: Ulottuu yhden sarakkeen yli;
- **Kolmas elementti**: Ulottuu kaikkien kolmen sarakkeen yli.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBHcmlkIFV0aWxpdGllcyAtIFRhc2s8L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0iX19fX18gX19fX18gX19fX18iPgogICAgICA8ZGl2IGNsYXNzPSJfX19fXyBiZy1ibHVlLTcwMCB0ZXh0LXdoaXRlIHAtNCI+SXRlbSAxPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9Il9fX19fIGJnLWdyZWVuLTcwMCB0ZXh0LXdoaXRlIHAtNCI+SXRlbSAyPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9Il9fX19fIGJnLXJlZC03MDAgdGV4dC13aGl0ZSBwLTQiPkl0ZW0gMzwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

- Ruudukon säiliölle käytä `grid grid-cols-3 gap-4`;
- Ensimmäiselle elementille käytä `col-span-2`;
- Toiselle elementille käytä `col-span-1`;
- Kolmannelle elementille käytä `col-span-3`.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBHcmlkIFV0aWxpdGllcyAtIFNvbHV0aW9uPC90aXRsZT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi50YWlsd2luZGNzcy5jb20iPjwvc2NyaXB0PgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImdyaWQgZ3JpZC1jb2xzLTMgZ2FwLTQiPgogICAgICA8ZGl2IGNsYXNzPSJjb2wtc3Bhbi0yIGJnLWJsdWUtNzAwIHAtNCI+SXRlbSAxPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImNvbC1zcGFuLTEgYmctZ3JlZW4tNzAwIHAtNCI+SXRlbSAyPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImNvbC1zcGFuLTMgYmctcmVkLTcwMCBwLTQiPkl0ZW0gMzwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

Opi muotoilemaan verkkosivustoja tehokkaasti Tailwind CSS:n avulla, joka on utility-first-kehys nopeaan käyttöliittymien kehitykseen. Tutustu Tailwindin käyttöönottoon ja utility-luokkien soveltamiseen väreihin, typografiaan, reunoihin ja varjoihin. Rakenna ja muotoile keskeisiä komponentteja, kuten painikkeita, kortteja ja lomakkeita. Hallitse asettelutekniikoita hyödyntämällä välistyksiä, flexboxia ja grid-apuluokkia. Luo responsiivisia suunnitelmia ja mukauta Tailwind vastaamaan projektisi tarpeita.

Tutustu Tailwind CSS:ään, utility-first-kehykseen, joka tunnetaan joustavuudestaan ja tehokkuudestaan verkkotyylittelyssä. Selvitä keskeiset hyödyt ja utility-first-filosofia. Lisäksi perehdy yksinkertaisiin asennustapoihin CDN:n tai npm/yarnin avulla.

Tutustu Tailwind CSS:n perustavanlaatuisiin elementteihin, mukaan lukien utiliteettiluokkien ymmärtäminen ja niiden soveltaminen HTML-elementteihin. Syvenny olennaisiin muotoilutekniikoihin, kuten värien, reunojen, varjojen ja typografian utiliteettien asettamiseen.

Syvenny käytännön sovelluksiin, joissa keskitytään Painikkeiden, Lomakkeiden ja Korttien luomiseen ja tyylittelyyn. Käytännön haasteiden avulla opit hallitsemaan näiden keskeisten käyttöliittymäkomponenttien rakentamisen ja kehität taitojasi todellisten esimerkkien kautta.

Tutustu Tailwind CSS:n keskeisiin väli- ja täyteominaisuuksiin sekä niiden soveltamiseen elementteihin. Sisältää myös flexbox-ominaisuuksien hyödyntämisen asettelun hallintaan näyttöasetusten, flex-suunnan sekä vaaka- ja pystysuuntaisen kohdistuksen avulla. Lisäksi perehdyt ruudukko-ominaisuuksiin yksinkertaisten mutta tehokkaiden ruudukkopohjaisten asettelujen luomiseksi, mukaan lukien ruudukkojen ja niiden osien määrittely.

Opi mukauttamaan Tailwind CSS vastaamaan projektisi suunnitteluvaatimuksia ja luomaan mukautuvia asetteluja eri laitteille.

Haaste: Ruudukkosommittelun Hallinta

Tehtävä

Awesome!

Haaste: Ruudukkosommittelun Hallinta

Tehtävä