The Styles Pane – Layout

On the Styles Pane under the Layout section, several positioning options are made available to you so you can pick the method that fits best with your design. The choice will vary depending on which element is currently selected. The three most common display options are CSS Grid, Flexbox, and Block. You can also select less frequented layout controls such as Inline Block, Absolute Positioning along with Hide.

Depending on the layout selection you choose, corresponding layout controls will appear. Apply your positioning, then you can tweak the dimensions of the items below including Height, Width, Margin and Padding.

The tools on the design pane have been organized in groups of related controls. Each of the groups (sections) can be collapsed and expanded when needed. When all the sections are expanded the scroll to the lower sections can be getting rather long.

CSS Grid

CSS Grid layouts are the most powerful layout controls in CSS. It is a two-dimensional system that handles both rows and columns. The "Grid' is great for a modular design approach. Used to manage major page areas or small combination of elements.

This system allows you to design without having to use floats and other positioning methods.

Organize page content into Container elements then position the content accordingly within it. You basically build a mini grid within the Container. The children within the parent element can be directly told where to go within the grid. You can either give each item an area name, or give it coordinates that match the lines you want them on.

We see Grid being the layout method of choice for content on the web - especially now that all modern browsers support it. CSS Grid is covered later in this guide. If you would like to skip ahead using the following links.

Liberate Your Layout

Using 'grid' for layout is the hottest new design technique that has come to the web in years. And for good reason, ever since the early days of the web world, layout creation has been cumbersome. A fact only amplified by the responsive revolution where layouts have to be adjusted depending on the available screen width. Luckily CSS Grid is the final answer to all the old layout hacks and inconveniences.

With Grid Layout, content can be placed explicitly and precisely in grid containers. These containers can also be nested — the child grid containers can be easily be arranged within their parent grid container.

Easily rearrange layouts for different screens. With media queries, the elements (and 'element containers') can be easily repositioned to accommodate for different display sizes. We made a short video showing a full-blown layout change using line-based placement. What's really cool is that the entire rearrangement you see below took me less than 10 minutes!

Flexbox

Flexbox provides a superior method for aligning, ordering, sizing and positioning elements. Yup, it can do all of that and therefore is increasingly being used instead of other positioning controls. Setting the Display control to Flex for a Container will make all elements inside flex-children. These children will then listen to the flex settings of the parent, but can also get some individual flex styles.

A flex layout is created by setting the display property of a container element to  Flex . This can be any element that contains other elements, from a simple container, to a list element. The parent container becomes a flex-container, and all immediate children become flex-items.

The main characteristic of the flex container is the ability to modify the order, position, alignment, width or height of its children.

The Direction is used to define the direction the flex-items follow in the flex container. By default the flex-items will be positioned as (horizontal) Row. Changing the dropdown to Column will stack them.

The Wrap can be used to position a series of items on a single, or on multiple lines. If there is not enough space available, setting this property to wrap will place items that do not fit on the next line.

The Justify control determines how the elements are spaced out horizontally.

When there is more than a single line — more than a single column or row — of items, (align) Content can be used to distribute the space between the lines.

Using (align) Items the position of the elements on the cross axis of the defined direction can be managed.

The container has a class of flex-parent with initial settings of Direction row to place them next to each other and Justify flex-start to align them to the left. The Item center value perfectly centers them vertically

The flex-items also use the flex display property. This allows us to easily vertically center the text using the column Direction now with center for the Justify control.

The flex-items can also take on individual flexbox rules. The example below is an extension from the previous example, but now each of the containers have one additional class — fi-1 to fi-4 — so individual rules can be applied. Please make sure to deselect the other classes before doing so!

It will be immediately clear that the blue box — item #4 — is now first in line. This is done with the Order control. Negative values can be used here as well, for fi-4 the -1 value puts it visually first in line.

The alignment specified by align-items on the parent container can be changed for individual flex items with the Align Self control. The black box has been pulled up by assigning the flex-start value to the fi-2 class. This overrides the center value specified on the parent.

The size of flex-items can be controlled with the Flex control. The Flex Basis specifies the initial size of a flex-item. This can be an absolute pixel value or a relative value like, for example, a percentage of the width of the parent.

The Flex Grow and  Flex Shrink controls are powerful tools that can be used to control the growth or reduction of the element based upon the available display space.

The image above shows the settings for the black box (flex-item #2). The initial width is not changed, the Flex Basis remains on auto. However, the Flex Grow setting tells the browser that the black box can take up 3 times as much of the remaining empty space as the other items.

Each of the items above has a different grow value, ranging from 1 to 4, causing the differences in width.

With the combination of Flex Basis and the unit switcher plus the Flex Grow control magical things can be achieved. In the example below the target (initial) value for each of the cards is set to 280px. When there is not enough room to get to that width, the item(s) will wrap.

They all have a Flex Grow value of 1 , so any remaining empty space will be distributed to them equally.

The result is that the sizing and positioning of the cards automagically adjusts to the available width and the height is maintained dynamically. Flexbox is an extremely powerful layout tool.

Position Power 

The Position control can be used to define alternative rules for the positioning of an element.

Static — the first button — is the position value applied by the browser if no other value has been specified. These elements behave exactly as you would expect, according to the rules defined by the other controls. In the first row of the example below this is illustrated — four blocks, each 22% wide and 1% margin on the left and right are placed next to each other using flex-direction: row.

Relative positioned elements behave very similar to static elements with two exceptions. Firstly, they can be moved around using offset values. The big difference with using margins for this is that other elements are displayed as if the element were in its normal position and taking up its normal space. The second row shows this — despite the dark block being visually out of position, the other blocks display exactly as in the row above.

An absolute element can be positioned anywhere in the design using the same offset properties as relatively positioned elements. To do this inside of the current container or column, this parent container cannot be positioned static.

Element that are positioned absolutely are taken out of the flow, taking up no space and not influencing the position of the other elements. Usually the z-index property is increased to make sure the element is visible on top of the other element. This is how dropdown menus are frequently created and illustrated in the third row. All types of cool stuff can be created with absolute positioned elements.

An element with a fixed position uses the viewport (browser window) as its coordinate system. This means it always stays at the exact same position, also when the page is scrolled.

Block

Most elements in the app are displayed as block by default. This means the elements they will stack on top of each other vertically.

Z-Index, Overflow, and Vertical Align

When elements overlap, the Z-index determines which one covers the other. An element with a higher z-index covers an element with a lower one.

When a container has a specific height, there might not always be enough room for all the content to be displayed. With Overflow you can specify what needs to happen in that case. The content can be clipped or be allowed to overflow, which might impact elements below the container. The parent container can also be instructed to render scrollbars.

Vertical-align controls how inline elements are lined up vertically. The default value is baseline, which aligns the baseline of the element with the baseline of its parent.

The most common custom values are top, middle and bottom. The effect is shown in the examples below.

Please note that this CSS control does not allow you to vertically center an element within another element. Flexbox would be the tool of choice for that.

Multi-Column Layout

The CSS multi-column layout is mostly thought of as a way to create print-inspired text columns. However, it's a very versatile tool that extends to other bigger and smaller areas of layout creation — it can be applied to containers as well as single text elements.

Count and Width are the most powerful tools. They control whether and how many columns will appear. Obviously, the Count sets the number of columns to a specific number.

The Width determines the minimum desired column width. If column-count is not also set, then the browser will automatically make as many columns as fit in the available width. Otherwise the browser will make columns of the specified width, with a maximum as defined by the Count.

The other controls enhance this core feature. The Gap let's you specify the space between the columns. A line can be drawn between the columns with the Rule control. The width, style and color can be specified as well.

When the multi-column is used on a container, elements inside can be instructed to span across all columns of the layout. Content before and after the element is still automatically balanced across columns before and after the element appears.

Multi-column layout settings are not limited to text and can be applied on parent containers as well. In the example below there's a bunch of cards that are flowing between different columns and for which the column count changes depending on the display width.

Please note that in some browsers a tiny overflow effect can be visible at certain widths.