How To Use Responsive Fluid Layouts With App Builder

Fluid layouts are always challenging to create. In this tutorial, you will see how to quickly create a 3-column layout and then make it responsive when the screen size changes. We will also show you how to use the Layout properties in App Builder™ to achieve a dynamic stacking effect.

Before we go to the steps, let’s delve into the questions below.

What Are Fluid Layouts?

Fluid layouts (also known as liquid layouts) allow the app interface to resize itself dynamically, fitting different screen sizes, screen resolutions, browsers, and devices. Usually, the fluid layout uses percentage-based measurements and flexible grids to define each area of the layout.

This ensures that page elements are displayed proportionally and in the most optimal way. In other words, the widths of different page elements are adjusted proportionally to the width of the screen, device, or browser window that they are being viewed on.

When Are Fluid Layouts Used?

Responsiveness in design is key to delivering better UX today. With a variety of devices that people use daily (desktop computers, laptops, smartphones, etc.), building more flexible and adaptable interfaces is a way to better match the needs of the modern user.

That’s why fluid layouts come in handy. They are extremely useful when the project requires responsive designs or when users expect the content to quickly adjust to different screen dimensions and orientations, regardless of the device they use.

They are really important because they ensure that apps are accessible and usable on a variety of devices.

What’s The Difference: Fixed vs Fluid Layouts

Both fixed and fluid layouts have pros and cons, and each can be suitable when building a website or an app. The main difference between fixed and fluid layouts is their capability to change dimensions and adapt.

A fixed layout, for example, doesn’t change the dimensions of the container elements and remains the same when viewed on different screen sizes or browsers. This means that the website or the app looks the same on every device. It is a useful choice when you aim at consistency in design but it rather falls short in coping with varying aspect ratios.

Fluid layouts, on the other hand, are more user-friendly, adaptable, and flexible. Using them, you allow the content and every design element to stretch or shrink back proportionally to the width of the device screen or browser window.

Another difference is that fluid layouts use percentages to define every area of the layout, whereas the fixed layout relies on pixels that measure the width.

Let’s get started!

Step 1: Create a base layout

Create a New app using a Blank template.

• From the Components Toolbox, add a Row layout to the canvas and enable Resize: Grow.
• Set Appearance for the Row layout:
  Padding: 24px
Gap: 24px
Bg. Fill: Gray-200
• Inside the Row layout, add a column layout, enable Resize: Grow, and set Gap: 24px.
• Inside the column, add two-row layouts, and set both to Resize: Grow and Bg. Fill: White.

Pro-Tip: Remember that you can always add a new component to the canvas by using Ctrl + E / Cmd + E, which will speed up your app creation process!

Step 2: Create a 3-column structure

• Copy the column layout containing the child rows, and paste twice to create a 3-column layout.
• To help identify each row layout, easily add a title component inside each one and give it a number in the same order as the picture shown below.
• Then select all 6-row layouts with multiple-selection (shift + click) and change the alignment by setting V. Align: center and H. Align: center.

Step 3: Preparing for stacking

• Select the parent row layout that contains those 3 column layouts and set Wrapping: wrap.
• In the dropdown below, change the content alignment to stretch.

Step 4: Make it stack!

In order for the stacking to happen, the three Column layouts inside that Row layout need to have minimum widths set. When previewing the app, as the Browser width is reduced, each column will shrink till it reaches that min-width. When this happens, the child layouts will stack as a result of setting Wrapping: wrap.

• To achieve this, select the three columns and set Min. W: 280px for each.
• Preview your application to see how the columns stack vertically when you resize the browser.
• You can also use the Breakpoint selector to switch to smaller devices.
• Click on Edit to continue editing your app.

Step 5: Let’s take this one step further!

Finally, I would also like the first column to be wider than the other two, so I need to change its Resize settings.

• Select the first column and on the layout properties, click the edit button next to Grow and Shrink, and set the flex-grow:2.

This will make the first column take twice as much available space (horizontally) compared to the other 2.

And we’re done!

Here’s the end result of our application in 3 different screen sizes.
You can also check out the live app here.