Editor X: Rasters gebruiken
Leestijd 8 minuten
Editor X schakelt over naar Wix Studio, ons nieuwe platform voor bedrijven en freelancers.Lees meer over Wix Studio
CSS-rasters zijn een goede manier om ervoor te zorgen dat je elementen op een gestructureerde manier worden georganiseerd. In Editor X wordt elke container en elk onderdeel geleverd met een ingebouwd raster. Je kunt het aantal rijen en kolommen kiezen dat je compositie nodig heeft en hun grootte in veel verschillende afmetingen aanpassen.
In dit artikel lees je alles over het werken met rasters in Editor X:
Wil je meer weten?
Bekijk onze les over rasters in de Editor X Academy.
Een bestaand raster aanpassen
Elk onderdeel en elke container wordt geleverd met een ingebouwd 1x1-raster dat je kunt aanpassen. Schakel met één klik over naar een andere indeling of maak je eigen raster door de lijnen over je bestaande compositie te slepen.
Om het raster aan te passen:
- Klik op het relevante vak of pagina-onderdeel.
- Wijzig het raster op een van de volgende manieren:
Kies een indeling
Pas het raster op canvas aan
.
Tip:
Je kunt ook een onderdeel met een ingebouwd raster toevoegen door op het Onderdeel toevoegen-pictogram
te klikken.
te klikken. Een raster beheren vanuit het Inspector-paneel
Pas je raster aan om de exacte indeling te krijgen die je wilt. Je kunt het aantal rijen en kolommen wijzigen en hun grootte en de ruimtes ertussen aanpassen.
Om een raster te beheren:
- Klik op het betreffende raster.
- Klik bovenaan Editor X op het Inspector-pictogram
. - Klik op het Indeling-tabblad
en scrol omlaag naar Weergave. - Kies wat je wilt doen:
- Kies een andere indeling: Klik op de Indeling-dropdown om een andere look te selecteren die hetzelfde aantal cellen bevat als het bestaande raster.
- Pas je raster handmatig aan: Klik hieronder om te lezen hoe je:
Meer kolommen of rijen toevoegen
.
en selecteer een optie:
De grootte van je kolommen of rijen wijzigen
De grootte van de tussenruimtes bewerken
Een kolom of rij verwijderen
Met breekpunten werken:
Bij het ontwerpen van een raster verschijnt het alleen op het specifieke breekpunt waaraan je werkt. Je moet een raster maken voor elke schermgrootte om ervoor te zorgen dat de compositie van je elementen foutloos is.
Elementen in een raster positioneren
Bij het toevoegen van elementen en het plaatsen ervan op je raster, zijn er verschillende hulpmiddelen om je te helpen een responsieve indeling te maken:
Elementen dokken
Het dokken van elementen aan de rasterlijnen zorgt ervoor dat ze precies zo worden gepositioneerd als je wilt. Wanneer je een element toevoegt aan een rastercel, wordt het automatisch gedokt aan de dichtstbijzijnde verticale en horizontale rasterlijnen. Je kunt het dokken naar behoefte aanpassen vanuit het Inspector-paneel.
Elementen naar een andere rastercel verplaatsen
Onder het Positie-gedeelte in de Inspector kun je een element selecteren en de rastercel(len) zien waarin het is gepositioneerd. Klik op een rastercel om het element daarheen te verplaatsen, zonder slepen en neerzetten.
Elementen uitrekken om een rastercel te vullen
Rek elementen uit om met slechts één klik een rastercel te vullen. Als een element over de rasterlijnen van meer dan één cel wordt geplaatst, wordt het uitgerekt over alle cellen waarin het zich bevindt.
Tabel met rastereenheden
Gebruik het hele scala aan CSS-eenheden om je raster te creëren. Je kunt de grootte van de kolommen en rijen instellen met percentages, pixels of fracties. Je kunt ook de minimale en maximale grootte van de kolommen en rijen instellen en zelfs berekeningen gebruiken om het gewenste raster te creëren.
Let op:
Je kunt de grootte van je rijen en kolommen in verschillende eenheden instellen. Standaard zijn de eenheden voor rijen in pixels en de eenheden voor kolommen in fracties (fr).
Eenheid | Eenheidstype | Uitleg |
|---|---|---|
Fractie (fr) | Vloeiend | Stel de grootte van je kolommen of rijen in op een fractie van de grootte van het pagina-onderdeel of vak. Als in een raster van twee kolommen bijvoorbeeld de linkerkolom is ingesteld op 2fr en de rechterkolom is ingesteld op 1fr, neemt de linkerkolom 2/3e van het onderdeel of vak in beslag. |
Auto | Vloeiend | De hoogte en breedte van de rijen en kolommen worden automatisch aangepast aan de inhoud erin. |
Percentage (%) | Vloeiend | Stel de grootte van je kolommen of rijen in op een percentage van het onderdeel of vak. |
Pixels (px) | Vast | Stel de grootte van je kolommen of rijen in op een vast aantal schermpixels van het onderdeel of vak. 1px = 1/96e van 1 inch. |
Viewport breedte (vb) | Viewport | Stel de grootte van je kolommen of rijen in op een percentage van de breedte van het beeldscherm (de grootte van het browservenster). Bijvoorbeeld als het beeldscherm 50cm breed is, 1vb = 0,5cm. |
Viewport hoogte (vh) | Viewport | Stel de grootte van je kolommen of rijen in op een percentage van de hoogte van het beeldscherm (de grootte van het browservenster). Bijv. als het beeldscherm 50 cm hoog is, 1vh = 0,5 cm. |
Min/max | Anders | Stel de grootte van je kolommen of rijen in op een minimale en maximale grootte. Je kunt bij het gebruik van deze optie uit elk van de rastereenheden kiezen. |
Min. inhoud | Anders | Stel de grootte van je kolommen of rijen in om nooit kleiner te worden dan deze minimale inhoud. |
Max. inhoud | Anders | Stel de grootte van je kolommen of rijen in om nooit groter te worden dan deze maximale inhoud. |
Berekening | Anders | Maak een berekening met behulp van een van de rastereenheden om de grootte van de kolommen of rijen in te stellen. |
Vond je dit artikel nuttig?
|