Box Model


Layout is a core concept in page building, but unlike the messy and complicated concepts in CSS, you only need to learn one concept to master layout in Raber: the Box Model. 


With the power of the Box Model, you can create virtually any layout you want, from simple to complex, such as:



You can visite or edit the tutorial page here:


Next.js Clone




The Box component is a special component that allows you to create containers for other components, and control the layout within the container using the Layout Controller


You can experiment with different layout options for the three icons below here.


github [#142] Created with Sketch. Twitter-color Created with Sketch.


As you can see, first you need to select the component inside the container (not the container itself).


Open Layout Controller, you will see a basic preview window, and three columns of buttons, and a slide bar:



First you need to specify the flow direction: vertical or horizontal.


Once specified, you can further refine the layout by specifying how items are aligned to the container axis, as well as how items should be distributed alone the container.




If you want to make a layout like the folllowing:



Since there can only be one flow direction within a Box component, you can achieve different flow directions by dividing the Box into multiple sub-boxes. 


For example, you could create a horizontal Box containing two vertical Boxes to achieve the desired layout. You can experiment with this technique by trying it out live here.



The hierarchy structure in the Raber editor shows how Box components contain other Boxes to create the layout of a page. 


By nesting Boxes inside one another, you can achieve complex and dynamic layouts with ease.



We recommend watching the video below, which provides a step-by-step guide in just 3 minutes.




You just learned the Box Model, and think in “Box” way and make awesome layouts by using the Layout Controller!

Lessons you may want to learn next:

📚 Learn how to use your own component.