Haaste: Ruudukkosommittelun Hallinta
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.
index.html
- 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.
index.html
Oliko kaikki selvää?
Kiitos palautteestasi!
Osio 4. Luku 6
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Suggested prompts:
Can you show me the HTML structure that needs the Tailwind classes?
Where exactly should I add these Tailwind classes in the HTML?
Do you need an explanation of what each Tailwind class does?
Awesome!
Completion rate improved to 3.57
Haaste: Ruudukkosommittelun Hallinta
Pyyhkäise näyttääksesi valikon
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.
index.html
- 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.
index.html
Oliko kaikki selvää?
Kiitos palautteestasi!
Osio 4. Luku 6