[TASK] Repareer layout fout in side panel

[DphnZwp]

Omschrijving

De layout moet flexibel worden ingericht zodat kolommen op verschillende manieren kunnen worden geplaatst: naast elkaar of onder elkaar, afhankelijk van de beschikbare ruimte en het gewenste ontwerp.

Criteria

• Kolommen moeten verschillende groottes kunnen hebben om ze goed naast elkaar te laten passen.
• Er moeten maximaal drie of meer kolommen naast elkaar geplaatst kunnen worden.
• Ook indelingen met twee kolommen naast elkaar of volledig onder elkaar moeten mogelijk zijn.
• Alle kolommen moeten onder elkaar bij kleine scheremen (responsief gedrag).

Oplossing

Er wordt gebruikgemaakt van een 12-koloms gridsysteem (vergelijkbaar met dat van Bootstrap), maar dan op basis van CSS Grid Layout in plaats van de flexbox aanpak van Bootstrap. Afhankelijk van de gewenste kolomindeling geef je de kolommen een CSS class mee (col-1 t/m col-12) die de breedte bepaalt. Een class met de naam 'col' zonder nummer wordt in dit systeem niet gebruikt of ondersteund.

Voorbeelden

• Wil je twee gelijke kolommen naast elkaar? Gebruik dan twee kolommen met de class col-6 (2 × 6 = 12).
• Wil je drie gelijke kolommen naast elkaar? Gebruik dan drie kolommen met de class col-4 (3 × 4 = 12).
• Wil je vier gelijke kolommen naast elkaar? Gebruik dan vier kolommen met de class col-3 (4 × 3 = 12).
• Wil je es gelijke kolommen naast elkaar? Gebruik dan zes kolommen met de class col-2 (6 × 2 = 12).
• Wil je bijvoorbeeld een smalle kolom naast een brede? Gebruik dan col-3 naast col-9 (3 + 9 = 12).
• Wil je maar één kolom op een rij? Gebruik dan col-12.

Responsive

Op kleinere schermen worden de kolommen automatisch onder elkaar geplaatst. Dit wordt geregeld via een eigen media query en niet met Bootstrap-klassen zoals col-md-* of col-lg-* om het niet te moeillijk te maken.