Inhoud spreiden over meerdere cellen in een rasterindeling

Rastercontainers zijn uitstekend voor het creëren van een symmetrisch ontwerp, maar kunnen enigszins beperkend zijn. De functie voor het spreiden van inhoud geeft je meer flexibiliteit met de rasterindeling, waardoor inhoud meerdere cellen kan overspannen en je complexe lay-outs binnen een raster kunt creëren.

Inhoud spreiden over meerdere cellen

Het spreiden van inhoud over meerdere cellen geeft je meer ontwerpflexibiliteit. Je kunt bijvoorbeeld een afbeeldingsgalerij maken met foto’s van verschillende formaten.

Om inhoud over meerdere cellen te spreiden:

1. Maak een Raster aan. Voor dit voorbeeld maken we een 4 bij 2 raster.
   
    Voor details, zie Een Rastercontainer maken.
2. Sleep een afbeeldingswidget naar de eerste cel, die in de linkerbovenhoek. 
   
3. Voeg inhoud toe aan de widget. Voor details, zie Afbeeldingswidget.
   
4. Klik op het tabblad Geavanceerd.
   
5. Gebruik in het paneel, in de sectie Rasteritem, het dropdown-menu Kolomoverspanning om 2 te selecteren.
   
   Note

   Toen we de kolomoverspanning veranderden, beïnvloedde dit de hoogte van de cel. Zoals je kunt zien als je naar de lege cel kijkt, beïnvloedt deze verandering alle cellen in het raster omdat alle cellen in een raster dezelfde grootte hebben.
    
   
   
   
6. Gebruik het dropdown-menu Rijoverspanning om 2 te selecteren.
   De afbeeldingswidget beslaat nu vier cellen.
   
   Note

   De afbeelding lijkt dezelfde grootte te behouden, maar beslaat nu vier cellen in plaats van twee. Dit beïnvloedt de grootte van de cellen zoals je kunt zien aan de lege cel.  
   
   
   
   
7. Sleep een afbeeldingswidget naar de lege cel en voeg een afbeelding toe.
   
8. Verander in het tabblad Geavanceerd van deze afbeelding de Kolomoverspanning naar 2.
   Laten we nu nog een afbeelding toevoegen en een lege ruimte in de galerij creëren. Normaal gesproken kun je met een raster geen lege cellen hebben, maar aangepaste overspanning maakt dit mogelijk.
   
9. Voeg nog een afbeelding toe aan het raster.
10. Gebruik in het tabblad Geavanceerd het dropdown-menu Kolomoverspanning om Aangepast te selecteren.
    
11. Voer in het tekstvak 4 in.

Deze aangepaste instelling betekent dat de afbeelding zal beginnen bij de vierde verticale lijn of het einde van de tweede kolom. Zie hieronder voor meer informatie over de aangepaste instelling.

Het aangepaste veld gebruiken

De dropdown-menu’s Kolomoverspanning en Rijoverspanning bevatten numerieke waarden evenals een Aangepast veld. Het selecteren van Aangepast stelt je in staat om overspanning te controleren door code in te voeren in plaats van een nummer uit het dropdown-menu te selecteren.

Als je het Aangepast veld wilt gebruiken: 

1. Maak een rastercontainer en voeg een widget toe. 
   

2. Ga naar het tabblad Geavanceerd van de geselecteerde widget.
   
3. Selecteer met het dropdown-menu Kolomoverspanning of het dropdown-menu Rijoverspanning de optie Aangepast.
   
4. Gebruik het tekstvak om code in te voeren om de widget te laten overspannen.

Voorbeelden van aangepaste code voor het overspannen van widgets:

• Span 2: Overspant 2 rijen of kolommen.
  
  Note

  In de onderstaande codes verwijzen de nummers naar de lijnen die containers begrenzen (zie de onderstaande tabel ter referentie).
• 1 / 3: Overspant van de eerste lijn naar de derde lijn. 
• 2 / 5: Overspant van de tweede lijn naar de vijfde lijn. 

Aangepaste codes geven je meer flexibiliteit en stellen je in staat om lay-outs te creëren die niet mogelijk zouden zijn met de standaardnummers in het dropdown-menu.