Responsieve rasters in CSS kunnen gemaakt worden door het gebruik van Media Queries, Flexbox, CSS Grid en percentage breedtes. Hieronder wordt getoond hoe een eenvoudig responsief rooster kan worden gemaakt met CSS Flexbox.
1. Eerst definieer je een container met display: flex;
```
.container {
display: flex;
flex-wrap: wrap;
}
```
1. Vervolgens definieer je de breedte-verhoudingen van de items binnen je container. Voor dit voorbeeld maak ik een raster met kolommen die elk de helft van de breedte van hun container op een groot scherm innemen, een derde van de breedte op een medium scherm en de volledige breedte op een klein scherm.
```
.item {
flex: 50%;
}
@media screen and (min-width: 600px) {
.item {
flex: 33.33%;
}
}
@media screen and (min-width: 1000px) {
.item {
flex: 25%;
}
}
```
Het voorgaande voorbeeld maakt gebruik van CSS media queries en flex eigenschappen om responsieve roosters te creëren. Let op: de ‘flex’ eigenschap in dit geval configureert de ‘flex-grow’, ‘flex-shrink’ en ‘flex-basis’ eigenschappen tegelijkertijd. We gebruiken het hier om de breedte van de rooster items te controleren.
Het media query `@media screen and (min-width: 600px)` past andere stijlen toe wanneer de viewport een minimale breedte van 600px heeft, en de `@media screen and (min-width: 1000px)` doet hetzelfde, maar voor een minimale breedte van 1000px.
Deze methode is echter behoorlijk handmatig en kan ingewikkeld worden als het raster ingewikkelder wordt. Voor complexere rasters is het misschien beter om een raamwerk zoals Bootstrap te gebruiken, dat een goed ontworpen, grondig getest responsief raster systeem biedt.
