Studio Editor: Werken met een geavanceerd CSS-raster
Leestijd 7 minuten
In de Studio Editor kun je een geavanceerd CSS-raster gebruiken om de indeling van elementen en onderdelen te organiseren. Je kunt het aantal rijen en kolommen kiezen en hun grootte instellen met behulp van responsieve metingen (zoals fr, Min/max, %).
In dit artikel lees je alles over het werken met een CSS-raster:
Overschakelen van een onderdeelraster naar een CSS-raster
Onderdelen in de Editor worden geleverd met de optie om een onderdeelraster in te stellen. Dit is een gebruiksvriendelijke versie van het geavanceerde raster, gebaseerd op dezelfde CSS-logica. Door over te schakelen naar een geavanceerd CSS-raster heb je nauwkeurigere controle over de indeling per breekpunt.
Let op:
Nadat je de overstap hebt gemaakt, is het niet mogelijk om terug te gaan naar een onderdeelraster. Als je de actie zojuist hebt uitgevoerd, kun je rechtsboven in de Editor de Ongedaan maken-knop
gebruiken.
gebruiken. Om over te schakelen van een onderdeelraster naar een CSS-raster:
- Selecteer het relevante onderdeel in de Editor.
- Klik rechtsboven in de Editor op de Inspector-pijl
. - Scrol omlaag naar Indeling.
- Klik naast CSS-raster op Toepassen.
- Klik op CSS-raster toepassen.
En nu?
Pas de rijen, kolommen en afstanden aan vanuit het Inspector-paneel. Je kunt ook rasterlijnen op het canvas slepen om ze te verplaatsen.
Een CSS-raster toepassen op andere elementen
Je kunt een CSS-raster toepassen op container-, lightbox-, flexbox- en repeater-items. In het repeater-element specifiek geldt dat zodra je een raster op één item toepast, de rest automatisch wordt bijgewerkt.
Om een CSS-raster toe te passen:
- Selecteer het relevante element in de Editor.
- Klik op het Meer acties-pictogram
. - Klik op Geavanceerd CSS-raster toepassen.
- Kies een indeling uit de 1x1-dropdown.
Tip: Selecteer Anders als je je eigen aantal rijen en kolommen wilt instellen.
En nu?
Pas de rijen, kolommen en afstanden aan vanuit het Inspector-paneel. Je kunt ook rasterlijnen op het canvas slepen om ze te verplaatsen.
Een CSS-raster aanpassen
Pas je raster aan om de exacte indeling te krijgen die je wilt. Je kunt het aantal rijen en kolommen wijzigen, hun grootte en de ruimtes ertussen aanpassen.
Tip:
Bij het ontwerpen van een raster is dit alleen van toepassing op het specifieke breekpunt waaraan je werkt. Je moet het raster aanpassen aan elk breekpunt om ervoor te zorgen dat de samenstelling van je elementen foutloos is.
Om een CSS-raster aan te passen:
- Selecteer het relevante element of onderdeel.
- Kies hoe je het raster wilt aanpassen:
Kies een andere indeling
Voeg meer rijen en kolommen toe
.
om deze optie te zien. 
Wijzig de grootte van je kolommen of rijen
Verwijder een kolom of rij
.
Bewerk de grootte van de ruimtes
Elementen in een raster plaatsen
Bij het toevoegen van elementen aan het raster kun je verschillende hulpmiddelen gebruiken om hun plaatsing nauwkeuriger in te stellen.
Elementen docken
Het docken van elementen aan de rasterlijnen zorgt ervoor dat ze precies zo worden gepositioneerd als jij wilt. In de Studio Editor worden alle elementen automatisch vastgezet, maar je kunt de docking handmatig aanpassen en marges toevoegen.
Elementen verplaatsen tussen rastercellen
Onder het Positie-gedeelte in de Inspector kun je een element selecteren en de rastercel zien waarin het zich bevindt. Klik op een rastercel om het element daarheen te verplaatsen, zonder slepen en neerzetten.
Je kunt ook de specifieke kolom- en rijnummers invoeren, wat handig is wanneer je een element over meerdere rastercellen moet plaatsen.
Tabel met rastereenheden
Gebruik het hele scala aan CSS-eenheden om je raster te maken. Je kunt de grootte van de kolommen en rijen instellen met behulp van percentages, breuken of pixels. Je kunt ook de minimum- en maximumgrootte van de kolommen en rijen instellen, of berekeningen gebruiken om het gewenste raster te maken.
Percentage (%)
Breuk (fr)
Automatisch
Pixels (px)
Viewport breedte en hoogte (vb en vh)
Min en Max inhoud
Min/max
Berekening