Samenvatting
Mach3Blocks gebruikt een 12-koloms grid om de breedte van kolommen te bepalen. Als je begrijpt hoe dit werkt, kun je de indeling van elk blok precies instellen zoals jij dat wilt — van twee gelijke helften tot een smalle zijbalk met een breed contentvlak.
Hoe werkt het
Het idee: 12 vakjes breed
Stel je voor dat elk blok een liniaal is van 12 vakjes breed. Die 12 vakjes verdeel je over je kolommen. Elke kolom krijgt een spanwijdte — een getal dat aangeeft hoeveel vakjes die kolom inneemt.
De totale spanwijdte van alle kolommen in een rij is altijd 12. Dat is de volle breedte.
Enkele voorbeelden:
| Indeling | Uitleg |
|---|---|
| 6/12 + 6/12 | Twee gelijke kolommen naast elkaar (elk de helft) |
| 4/12 + 4/12 + 4/12 | Drie gelijke kolommen (elk een derde) |
| 3/12 + 9/12 | Een smalle kolom links en een brede rechts |
| 12/12 | Eén kolom over de volle breedte |
Spanwijdte instellen
- Klik op een kolom in het blok
- Ga naar het opmaakpaneel aan de rechterkant
- Zoek de instelling Spanwijdte
- Kies een waarde van 1/12 tot en met 12/12
Tip: Tel altijd even na of de spanwijdtes van je kolommen samen op 12 uitkomen. Als het totaal meer dan 12 is, valt een kolom naar de volgende regel. Als het minder is, krijg je ongewenste witruimte.
Kolommen toevoegen
Klik op een bestaande kolom → drie puntjes → Kolom invoegen (ervoor of erna). Nadat je de kolom hebt toegevoegd, stel je de spanwijdtes van beide kolommen handmatig in zodat ze samen weer op 12 uitkomen.
Veelgebruikte indelingen
| Doel | Kolom 1 | Kolom 2 | Kolom 3 |
|---|---|---|---|
| Twee gelijke blokken | 6/12 | 6/12 | — |
| Drie gelijke blokken | 4/12 | 4/12 | 4/12 |
| Tekst + afbeelding | 7/12 | 5/12 | — |
| Smal + breed | 3/12 | 9/12 | — |
| Volledige breedte | 12/12 | — | — |
Wat als mijn kolommen onder elkaar vallen?
Dat betekent dat de spanwijdtes samen meer dan 12 zijn — er is niet genoeg ruimte om alles naast elkaar te tonen. Controleer de spanwijdtes en pas ze aan zodat ze samen op 12 uitkomen.
Het kan ook zijn dat je op een smal scherm werkt. Op mobiel stapelen kolommen standaard onder elkaar — dat is normaal gedrag.
Hoe maak je een andere indeling op mobiel?
Op een telefoon wil je vaak dat kolommen onder elkaar staan in plaats van naast elkaar. Dat kun je instellen per breakpoint (schermgrootte):
- Desktop (XL): kolom 1 = 6/12, kolom 2 = 6/12 → naast elkaar
- Mobiel (XS): kolom 1 = 12/12, kolom 2 = 12/12 → onder elkaar
Zo krijgen bezoekers op een groot scherm een mooi naast-elkaar-overzicht, en op een klein scherm een prettig leesbare stapeling.
Kolomvolgorde per apparaat
Soms wil je op mobiel een andere volgorde dan op desktop. Bijvoorbeeld: op desktop staat een afbeelding links en tekst rechts, maar op mobiel wil je de tekst bovenaan.
Dat regel je met de instelling Afwijkende volgorde in het opmaakpaneel. Stel deze in voor elke kolom in de rij — niet alleen voor de kolom die je wilt verplaatsen.
Voorbeeld:
- Kolom 1 (afbeelding) → volgorde op mobiel (XS): 2
- Kolom 2 (tekst) → volgorde op mobiel (XS): 1
Op mobiel verschijnt de tekst dan bovenaan, en de afbeelding eronder.
Container: standaard of volledige breedte?
Een container begrenst de breedte van je content (standaard maximaal 1056 pixels). Op een breed scherm zie je dan witruimte aan de zijkanten — dat is bewust, want anders wordt tekst te breed om prettig te lezen.
Wil je toch de volledige schermbreedte gebruiken? Dat kan op twee manieren:
- Content uitvullen — de content binnen de container vult de volle breedte van het blok
- Blok uitvullen — het blok zelf vult de volledige schermbreedte
Tip: Gebruik de volledige breedte voor achtergrondafbeeldingen of kleurvlakken. Houd tekst altijd binnen een container, want tekst van rand tot rand leest niet prettig.
Veelgestelde vragen
Kan ik rijen buiten een container plaatsen?
Dat is technisch mogelijk via code, maar het geeft onvoorspelbare resultaten in de editor. Gebruik rijen altijd binnen een container.
Wat is het verschil tussen een container en een rij?
Een container beperkt de breedte. Een rij groepeert kolommen naast elkaar. Ze werken samen: de container bepaalt hoe breed het geheel mag zijn, de rij verdeelt die breedte over kolommen.