## Taak
Maak de HTML-structuur compleet door de ontbrekende Tailwind CSS-klassen toe te voegen om aan de layouteisen te voldoen.
- **Gridcontainer**: Definieer een grid met drie kolommen en een tussenruimte van 1rem (16px) tussen de items;
- **Eerste item**: Beslaat twee kolommen;
- **Tweede item**: Beslaat één kolom;
- **Derde item**: Beslaat alle drie de kolommen.

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

- Voor de gridcontainer, gebruik `grid grid-cols-3 gap-4`;
- Voor het eerste item, gebruik `col-span-2`;
- Voor het tweede item, gebruik `col-span-1`;
- Voor het derde item, gebruik `col-span-3`.

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

Leer hoe je websites efficiënt kunt stylen met Tailwind CSS, een utility-first framework voor snelle UI-ontwikkeling. Ontdek hoe je Tailwind installeert en utility classes toepast voor kleuren, typografie, randen en schaduwen. Bouw en style essentiële componenten zoals knoppen, kaarten en formulieren. Beheers lay-outtechnieken met behulp van spacing-, flexbox- en grid-utilities. Maak responsieve ontwerpen en pas Tailwind aan op de behoeften van je project.

Maak kennis met Tailwind CSS, een utility-first framework dat bekend staat om zijn flexibiliteit en efficiëntie in webstyling. Ontdek de belangrijkste voordelen en de utility-first filosofie. Verken daarnaast de eenvoudige installatiemethoden via CDN of npm/yarn.

Ontdek de fundamentele elementen van Tailwind CSS, waaronder het begrip utility classes en hun toepassing op HTML-elementen. Verken essentiële opmaaktechnieken zoals het instellen van kleuren, randen, schaduwen en typografiehulpmiddelen.

Verdiep u in praktische toepassingen met de nadruk op het creëren en stylen van knoppen, formulieren en kaarten. Door middel van praktijkgerichte uitdagingen beheerst u het bouwen van deze essentiële UI-componenten en verbetert u uw vaardigheden met voorbeelden uit de praktijk.

Ontdek de essentiële spacing utilities van Tailwind CSS, met uitleg over het toepassen van marge en opvulling op elementen. U leert ook flexbox utilities gebruiken om de lay-out te beheersen met display-instellingen, flexrichting en zowel horizontale als verticale uitlijning. Daarnaast verdiept u zich in grid utilities om eenvoudige maar krachtige grid lay-outs te creëren, waarbij u het opzetten van gridcontainers en items beheerst.

Ontdek hoe u Tailwind CSS kunt aanpassen aan de ontwerpeisen van uw project en flexibele lay-outs kunt creëren voor verschillende apparaten.

Uitdaging: Beheersing van Grid-Layout

Taak

Awesome!

Uitdaging: Beheersing van Grid-Layout

Taak