How Do We Solve Dynamic Layout in Code?

For now, the only solution for complex layouts in Digital Design is to code them. The possibilities offered by code are close to limitless, even if you’re only using on basic front-end/CSS solutions.

Flexbox

Flexbox is great for one-dimensional layouts. This means if you’re laying out items on just one axis, you would probably go with Flexbox. It’s ‘inside-out’ layout, meaning the layout can easily adapt to fit your dynamic content.

Grid

CSS Grid is perfect for two-dimensional layouts. Grid is ‘outside-in’, meaning your content mostly has to adapt to the layout rules you’ve explicitly defined on the Grid, rather than vice versa.

Dynamic Units

Last but not least are the Dynamic Units — if you work in code, you’ll have seen these sprinkled throughout your work.

↳ Now Let’s Put it All Together, Visually

Constraints + ~Flexbox + ~Grid + Dynamic Units = Phase’s Layout Model. That’s basically it. Phase combines them all, visually.

So, how does it all work together?

Sizing and Units ⦭

Let’s start with basics. Each element has its own size. Not just a fixed pixel value, but also dynamic percentage values when you need them, that are always relative to their Parent Element.

It’s not only about width and height though. Dynamic layout wouldn’t be complete without things like max and min, so dimensions can have minimum and maximum values set as well. Oh, and of course we can also set our Elements to grow or shrink, to fit or fill the available space.

Then we use Fraction Units to easily calculate the space taken up by an Element, and the proportions between Elements.

For example when Element A has a width of 2fr (fractions) and Element B has a width of 1fr, Element A will fit ⅔ of the available space while Element B will occupy ⅓. If this seems confusing, don’t worry. When you work with it in a simple visual editor, it becomes very easy 😉.

By now you may be asking yourself: why is this fraction unit important? Couldn’t you just use the percentage value?

Well, yes…for static design. In Dynamic Layouts fractions matter when you want to place multiple Elements within the same parent. In this case, Fraction units recalculate things dynamically for you, on the fly.

Let’s look at an example when Fraction Units make sense.

Imagine that Element B in the image below is a Component, and you duplicate it. Fraction Units will take care of the layout for you automatically, without any calculations, or manual moves and resizing.

So when you duplicate Element B, your new layout is this: Element A width is ½ , Elements B1 width at ¼, and Elements B2 width at ¼ .

Sizing summary: