Studio Editor: Kiezen tussen op flexbox gebaseerde en op rasters gebaseerde tools

De Studio Editor biedt krachtige indelingstools om elementen te ordenen, elk afgestemd op specifieke ontwerpbehoeften. Deze tools zijn gebaseerd op twee veelvoorkomende CSS-technologieën: raster en flexbox. Als je dit onderscheid begrijpt, kun je de beste responsieve indelingen plannen om de inhoud van je klant te presenteren. 

In dit artikel zullen we de indelingstools per type uitsplitsen, hun belangrijkste mogelijkheden uitleggen en je helpen beslissen welke het beste is voor jouw behoeften.

Rasters zijn een tweedimensionaal CSS-model dat rijen en kolommen gebruikt om elementen binnen vooraf gedefinieerde cellen te ordenen. Ze zijn bijzonder krachtig voor het maken van responsieve, modulaire indelingen met nauwkeurige controle.

Lege onderdelen worden geleverd met een ingebouwd raster, met een enkele cel (met het hele onderdeel). Splits het raster indien nodig in meer cellen om een responsieve structuur aan de inhoud te geven. Nadat je je indeling voor desktop hebt gekozen, kun je een andere kiezen voor kleinere breekpunten.

Een geavanceerd CSS-raster biedt volledige vrijheid om ingewikkelde indelingen te maken in onderdeelrasters, containers, lightboxen, flexboxen en repeater-items. Je kunt de exacte grootte van elke cel, op elk breekpunt, instellen met behulp van responsieve metingen (bijvoorbeeld: fr, Min/max, %). 

Het beste voor: Complexe indelingen die tot op de pixel perfecte aanpassingen vereisen.

Een container is een eenvoudige maar essentiële indelingstool. Wanneer je elementen aan het containervak toevoegt, wordt het automatisch hun parent-element en definieert het hun structuur. 

Het beste voor: Zelfstandige, opzichzelfstaande indelingen in onderdelen. 

Flexbox is een eendimensionaal CSS-model dat is geoptimaliseerd voor indelingen waarbij elementen zich dynamisch moeten aanpassen binnen een bovenliggende container. Met flexbox-tools 'flexen' elementen naadloos om in de toegewezen ruimte te passen, of het nu gaat om vergroten, verkleinen of teruglopen.

Een stapel is een onzichtbare flexibele container die zorgt voor de verticale of horizontale uitlijning van de elementen.  Stapelen houdt de marges tussen elementen intact en voorkomt dat elementen elkaar overlappen op kleinere schermen.

Bovendien kun je de volgorde van de stapelelementen per breekpunt instellen om ervoor te zorgen dat de indeling er op alle schermformaten gepolijst uitziet. 

Het beste voor: Zelfstandige, op zichzelf staande indelingen binnen een onderdeel, waarbij elementen nauwkeurige uitlijning langs een enkele horizontale of verticale as nodig hebben. 

Een flexbox is een kant-en-klare flex-indeling waarbij de items automatisch teruglopen om op elk scherm te passen. Het bestaat uit responsieve containers, met verschillende weergavetypen om bij je specifieke inhoud te passen (bijvoorbeeld: mozaïek, schuifregelaar, kolommen). 

Je kunt voor elke viewport een ander weergavetype kiezen (bijvoorbeeld: schuifregelaarindelingen werken prima voor mobiele apparaten) en ook een specifieke itemvolgorde instellen.

Het beste voor: Het organiseren van een grote hoeveelheid inhoud in een nette, handige indeling. 

Een repeaters is een lijst met items die hetzelfde ontwerp en dezelfde indeling hebben, maar elk andere inhoud hebben. De indeling en het ontwerp worden automatisch aangepast, zodat je je nooit zorgen hoeft te maken over de samenhang. 

Wat repeaters echt uniek maakt, is de mogelijkheid om ze te koppelen aan je inhoudsverzamelingen. Hiermee kun je de inhoud vanaf de back-end beheren en bijwerken zonder het daadwerkelijke ontwerp te beïnvloeden, waardoor ze de ultieme datagestuurde indelingstool zijn. 

Het beste voor: Lijsten, of elk type inhoud dat je wilt opsplitsen in items die er perfect samenhangend uitzien.

Voordat je een van onze tools selecteert, moet je de gewenste indeling voor elke schermgrootte plannen. Daarna kun je een indelingstool kiezen die de mogelijkheden bevat die je nodig hebt. 

Elke indelingstool is ontworpen om tegemoet te komen aan verschillende hoeveelheden en soorten inhoud. Een container werkt bijvoorbeeld goed voor kleinere, gerichte inhoud, terwijl een groot onderdeelraster beter geschikt is voor het organiseren van complexe indelingen. 

Hoewel zowel flexboxen als repeaters uitstekend zijn om grote hoeveelheden inhoud op een georganiseerde manier te presenteren, dienen ze verschillende doelen. Repeaters stroomlijnen de consistentie door dezelfde indeling en hetzelfde ontwerp op alle items toe te passen, terwijl flexboxen je de vrijheid geven om elk item afzonderlijk te ontwerpen.

Flexbox- en rasterelementen verschillen in de manier waarop de inhoud zich aanpast aan verschillende schermformaten. Rasters tonen een ander aantal rijen en kolommen om op kleinere schermen te passen. In flexbox-tools loopt de inhoud automatisch terug en/of wordt opnieuw geordend om op het scherm van de bezoeker te passen.

Alleen repeaters ondersteunen deze optie, dus kies deze tool als je inhoud uit CMS-verzamelingen wilt weergeven. 

Als alternatief kun je specifieke elementen koppelen (bijvoorbeeld: tekst of afbeeldingen) aan de verzameling en ze toevoegen aan een container of stapel om de indeling overzichtelijk te houden.