Leg je inhoud vast op een raster. Elk onderdeel in de Studio Two-editor wordt geleverd met een onderdeelraster dat je indeling bij elkaar houdt terwijl de schermgrootte verandert.
Kies de rasterindeling die het beste bij je inhoud past, of bewerk het CSS-raster handmatig wanneer je de rijen en kolommen zelf wilt instellen en geef ze elk een grootte met responsieve eenheden.
Werken met een onderdeelraster
Geef het onderdeelraster rond je inhoud vorm. Lege onderdelen beginnen als een enkele cel, dus de meeste indelingen beginnen met een opsplitsing in rijen, kolommen of een collage. Van daaruit kun je cellen toevoegen, hun grootte gelijk maken en het raster spiegelen om een andere compositie te proberen, zonder elementen te slepen.
Om een onderdeelraster aan te passen:
Ga naar je editor.
Selecteer het betreffende onderdeel.
Klik rechtsboven in de editor op het Inspector openen-pictogram 
.
(Indien nog niet geopend) Klik op het Ontwerp-tabblad en scrol omlaag naar Indeling.
Kies hoe je het raster wilt aanpassen:
Herschik de cellen die je al hebt, zonder je elementen eruit te verplaatsen. De opties passen zich aan aan het huidige aantal cellen, dus de lijst stelt alleen rangschikkingen voor die passen.
Wat je in het Inspector ziet, hangt af van je huidige onderdeelraster:
Als je onderdeelraster slechts 1 cel heeft, kun je onder Indeling kiezen een indeling met meer cellen selecteren.
Als je raster meerdere cellen heeft, kun je op de Indeling wijzigen-dropdown klikken en een indeling selecteren (Rijen, Kolommen, Collage of Kaarten).
Let op: De beschikbare indelingen zijn afhankelijk van het aantal cellen in je onderdeelraster. De indeling Kaarten is bijvoorbeeld alleen beschikbaar voor rasters met 4 cellen.
Een cel toevoegen of verwijderen
Vergroot het raster wanneer je indeling nog een cel nodig heeft. Jij kiest aan welke rand van het raster het wordt toegevoegd.
Klik op de actiebalk op Indeling en klik dan onder Cel toevoegen op de richting waarin je de nieuwe cel wilt laten gaan: Rechts 
, Links 
, Boven 
of Onder 
.
Om een cel te verwijderen, klik je er met de rechtermuisknop op op het canvas en selecteer je Verwijderen of druk je op de Delete-toets op je toetsenbord. Dit verwijdert ook de elementen die zich momenteel in de cel bevinden.
Splits 1 cel in twee. Dit kan ervoor zorgen dat sommige elementen worden verplaatst, om netjes in een cel te passen, maar je kunt hun positie op het canvas altijd wijzigen.
Selecteer de cel op het canvas en kies dan de relevante optie naast Cel splitsen in het Inspector-paneel: Horizontaal splitsen 
of Verticaal splitsen 
.
Goed om te weten:
Je kunt cellen ook splitsen door in de actiebalk op dezelfde pictogrammen te klikken.
Cellen samenvoegen of omwisselen
Combineer 2 cellen tot één of laat ze van plaats verwisselen. Samenvoegen is alleen beschikbaar wanneer de cellen in dezelfde rij of kolom zitten, terwijl omwisselen werkt met eender welke twee cellen.
Klik op de eerste cel.
Houd de Shift-toets ingedrukt terwijl je op de tweede cel klikt.
Klik op de actiebalk op Samenvoegen of Omwisselen.
Het raster gelijkmaken of omdraaien
Verbeter de verhoudingen van het raster of draai de volgorde waarin de cellen verschijnen om. Omdraaien is een snelle manier om een andere compositie te testen, omdat de cellen en de elementen erin samen bewegen.
Selecteer de relevante optie naast Raster aanpassen in het Inspector-paneel:
Kolommen egaliseren 
: Geef elke kolom dezelfde breedte.
Rijen egaliseren 
: Geef elke rij dezelfde hoogte.
Kolommen omdraaien 
: Draai de volgorde van de kolommen om.
Rijen omdraaien 
: Draai de volgorde van de rijen om.
Goed om te weten:
Deze acties zijn ook beschikbaar in de actiebalk. Klik op Indeling en klik dan op het relevante pictogram naast Raster aanpassen.
De verticale afstand handmatig instellen
Neem de rijhoogten over met behoud van het onderdeelraster. De editor past de rijen standaard voor je aan en je kunt de afstand op elk moment teruggeven.
Als het onderdeel meer dan 1 cel heeft, selecteer je eerst de relevante cel. Klik dan op de Verticale afstand-dropdown en selecteer Handmatig of selecteer Automatisch om de grootte terug te zetten naar de editor.
Let op:
Als het responsieve gedrag van het onderdeel 'Aanpassen aan scherm' is, is de verticale afstand al ingesteld op handmatig.
Het CSS-raster handmatig bewerken
Bewerk het CSS-raster handmatig om de kolommen en rijen nauwkeurig te beheren. Met handmatige bewerking kun je elke kolom en rij vergroten of verkleinen in responsieve eenheden zoals fr, Min/max of %, en het aantal kolommen en rijen zelf instellen in plaats van een van de vooraf ingestelde indelingen te kiezen.
Je kunt het CSS-raster van een hele onderdeel of van een enkele cel bewerken:
Onderdeel: Vervangt het onderdeelraster. De cellen veranderen in containers op het nieuwe raster.
Cel: Verandert alleen de indeling van die cel in een CSS-raster. De rest van het onderdeelraster blijft zoals het is.
Om het CSS-raster handmatig te bewerken:
Ga naar je editor.
Selecteer bovenaan de editor het desktop-breekpunt.
Selecteer het relevante onderdeel of cel.
Klik rechtsboven in de editor op het Inspector openen-pictogram .
(Indien nog niet geopend) Klik op het Ontwerp-tabblad en scrol omlaag naar Indeling.
Klik naast CSS-raster op Handmatig bewerken.
(In de pop-up) Klik op Handmatig bewerken om te bevestigen.
Tip: Schakel het Niet opnieuw weergeven-selectievakje in om deze bevestiging op de website vanaf dat moment over te slaan.
Werken met een handmatig CSS-raster
Bouw het raster regel voor regel op. Een handmatig CSS-raster geeft je de rijen, kolommen en lege ruimtes als afzonderlijke waarden, met behulp van responsieve eenheden zoals fr, min/max, % en meer. Pas het raster op elk breekpunt aan — het ontwerp loopt trapsgewijs naar beneden van desktop, dus zorg ervoor dat je het aanpast om ook op kleinere schermen te passen.
Om een handmatig CSS-raster aan te passen:
- Ga naar je editor.
- Selecteer het relevante onderdeel of cel.
- Klik rechtsboven in de editor op het Inspector openen-pictogram .
(Indien nog niet geopend) Klik op het Ontwerp-tabblad en scrol omlaag naar Indeling.
Kies hoe je het raster wilt aanpassen:
Reorganiseer de cellen in je raster door een nieuw uiterlijk te selecteren in de Indeling-dropdown. De lijst met beschikbare indelingen is gebaseerd op het huidige aantal rijen en kolommen en stelt verschillende manieren voor om ze te schikken.
Goed om te weten:
Je kunt dit ook doen vanuit de actiebalk. Klik op de Indeling-dropdown (deze toont de huidige rastergrootte, bijvoorbeeld: 2x 2) en selecteer een nieuwe look.
Het formaat van de rijen en kolommen wijzigen
Stel zelf de grootte van elke rij en kolom in, in de eenheid die daarbij past.
Klik op Kolommen / Rijen om de volledige lijst te zien.
Voer een grootte en een eenheid in naast het relevante rij- of kolomnummer.
Goed om te weten:
Je kunt het formaat van de rijen en kolommen ook rechtstreeks op het canvas wijzigen. Klik in de actiebalk op het Raster op canvas aanpassen-pictogram 
en sleep de rasterlijnen naar de gewenste positie. Je elementen blijven op hun plaats.
Rijen en kolommen toevoegen of verwijderen
Wijzig de structuur van het raster nadat je het hebt gebouwd. Het toevoegen van een rij of kolom kan elementen verschuiven om er ruimte voor te maken.
Klik op Kolommen / Rijen om de volledige lijst te zien.
Klik naast de betreffende kolom of rij op het Meer acties-pictogram 
.
Selecteer de relevante optie:
Kolom: Kolom links toevoegen, Kolom rechts toevoegen of Kolom verwijderen.
Rij: Rij bovenaan toevoegen, Rij onderaan toevoegen of Rij verwijderen.
Goed om te weten:
Je kunt rijen en kolommen ook rechtstreeks op het canvas toevoegen. Klik in de actiebalk op het Raster op canvas aanpassen-pictogram 
en sleep dan van de linker- of bovenrand van het raster om een nieuwe rasterlijn toe te voegen. Je elementen blijven op hun plaats.
Je kunt de laatste kolom / rij in het raster niet verwijderen. Kolom verwijderen / Rij verwijderen is niet beschikbaar wanneer er slechts één is.
De lege ruimtes instellen
Plaats de rijen en kolommen uit elkaar. Voer naast Lege ruimtes de gewenste waarden in en klik op de huidige eenheid om naar een andere over te schakelen. Schakel bijvoorbeeld over van px* naar vw als dat beter werkt voor jou.
Je kunt dezelfde eenheid gebruiken voor beide lege ruimtes (horizontaal en verticaal) of voor elke lege ruimte een andere kiezen.
Een element naar een andere cel verplaatsen
Verplaats een element of rek het uit over meerdere cellen, zonder het over het canvas te slepen.
Selecteer het element dat je wilt verplaatsen.
(In het Inspector-paneel) Scrol omlaag naar Positie.
Klik op de relevante cel onder Locatie in rastercellen.
Tip: Rek het element uit over meerdere cellen door de Shift-toets ingedrukt te houden terwijl je op de cel klikt die je wilt bereiken.
Veelgestelde vragen
Klik op een vraag hieronder om meer te lezen over cellen en rasters.
Waarom kan ik geen cellen meer aan mijn onderdeel toevoegen?
Een onderdeelraster kan maximaal 16 cellen bevatten en Een cel toevoegen werkt niet meer zodra je dit hebt bereikt.
Als het ontwerp er meer nodig heeft, kun je de inhoud over 2 onderdelen splitsen of het CSS-raster handmatig bewerken en de structuur bouwen die je daar nodig hebt.
Ik wil mijn eigen rijhoogten instellen. Moet ik het CSS-raster handmatig bewerken?
Nee. Je kunt Verticale afstand instellen op Handmatig om zelf de hoogten in een onderdeelraster te bepalen.
Het handmatig bewerken van het CSS-raster is een grotere wijziging. Het vervangt het onderdeelraster helemaal en geeft je elke rij en kolom als een waarde die je zelf instelt. Gebruik het wanneer je de responsieve grootte-eenheden nodig hebt, of een structuur die de vooraf ingestelde indelingen niet omvatten.
.