# Afronding CSS Grid en Responsive Design

Je hebt geleerd hoe je CSS Grid kunt gebruiken om geavanceerde en responsieve layouts te maken. Met deze vaardigheden kun je ervoor zorgen dat je website er op elk apparaat geweldig uitziet.

Je hebt in dit hoofdstuk het volgende geleerd:

- **CSS Grid Layout**: Hoe je Grid kunt gebruiken om complexe en flexibele layouts te maken.
- **Grid Eigenschappen**: Gebruik van `grid-template-columns`, `grid-template-rows`, `grid-gap`, `grid-area`, enz.
- **Responsief Ontwerp**: Hoe je media queries gebruikt om je website aan te passen aan verschillende schermgroottes.
- **Mobile-First Benadering**: Eerst voor mobiele apparaten ontwerpen en vervolgens uitbreiden voor grotere schermen.

### Extra Hulpbronnen

- **W3Schools CSS Grid Tutorial**: <a rel="noopener" target="_new">https://www.w3schools.com/css/css\_grid.asp</a>
- **MDN Web Docs - CSS Grid**: [https://developer.mozilla.org/nl/docs/Web/CSS/CSS\_Grid\_Layout](https://developer.mozilla.org/nl/docs/Web/CSS/CSS_Grid_Layout)
- **A Complete Guide to Grid**: <a rel="noopener" target="_new">https://css-tricks.com/snippets/css/complete-guide-grid/</a>
- **Grid Garden**: [https://cssgridgarden.com/](https://cssgridgarden.com/) – Oefen met CSS Grid op een leuke manier.

### Veelgestelde Vragen

#### Wat is het verschil tussen Flexbox en Grid?

- **Flexbox** is ontworpen voor eendimensionale layouts (rij of kolom). Het is ideaal voor het uitlijnen van items in een enkele rij of kolom.
- **Grid** is tweedimensionaal en stelt je in staat om zowel rijen als kolommen te beheren. Het is geschikt voor complexe layouts die in beide richtingen variëren.

#### Mijn media queries werken niet. Wat kan ik doen?

- **Controleer de syntax**: Zorg ervoor dat je media queries correct zijn geformatteerd.
- **Plaatsing in CSS**: Media queries moeten na de standaardstijlen komen of specifiekere selectors hebben.
- **Cache legen**: Soms moet je de cache van je browser legen om de nieuwste wijzigingen te zien.

#### Hoe test ik mijn website op verschillende apparaten?

- **Browser Ontwikkelaarstools**: Gebruik de responsieve modus (meestal toegankelijk via F12).
- **Online Emulators**: Websites zoals BrowserStack kunnen helpen.
- **Fysieke Apparaten**: Als je toegang hebt tot verschillende apparaten, test dan daarop.

### Vragen of Hulp Nodig?

Als je vragen hebt of ergens tegenaan loopt:

- **Stel je vraag in de klas** of aan je docent.
- **Gebruik online hulpbronnen** en communities zoals Stack Overflow.
- **Experimenteer**: Probeer verschillende CSS Grid en media query technieken uit om te zien wat ze doen.