Layouts in UI Builder: columns, Flexbox and Grid

Why layout matters

In the last lesson, every component you added landed under the one before it, using the full width of the page. That is fine for a heading and a list, but almost no real page looks like that.

A workspace home page has a list on one side and a few charts on the other. A record page puts the form next to the activity stream. A header puts the title on the left and the buttons on the right. All of that is layout: not what components show, but where they sit and how much room they get.

Layout is also where pages break. A page that looks perfect on a wide monitor can turn into thin, unreadable strips on a laptop or a phone. A good layout keeps working when the screen gets smaller, and UI Builder gives you the tools to do that without writing CSS.

Where layouts live

You add a layout the same way you add a component. Select + Add content in the Content panel or on the stage, then open the Layouts tab instead of the components list. There you will find:

• Basic options, which are ready-made column layouts such as two or three columns.
• Flexbox, an empty container that lines up whatever you put inside it.
• Grid, an empty container with rows and columns.

A layout on its own shows nothing. It is an empty frame, and you then add components into it. In the Content panel, those components appear indented under the layout, the same way components inside a container did in the last lesson. Move the layout and everything inside it moves too.

Once a layout is selected, its settings live on the Styles tab, in the Layout section, where the layout type you chose is highlighted.

Column layouts

Column layouts are the ones you will use most. They split an area into side-by-side columns, and each column holds its own components.

What you want	How you do it
Change a column’s width	Select the layout and drag the divider between two columns on the stage. The percentages at the top update as you drag and always add up to 100%.
Make all columns equal	Choose Distribute columns evenly from the Content panel menu, the stage menu or the configuration panel.
Add or remove a column	Use Add column before, Add column after or Delete column. A column layout can have up to six columns.
Space the columns apart	Set Column gap under Layout.
Space components inside one column	Select the column and set its Gap. Use Direction to place them side by side (Row) or one under another (Column).
Give a column a clear name	Choose Rename, so the Content panel says “Main” and “Side panel” instead of “Column 1” and “Column 2”.

You can also style each column on its own, for example giving one column a border and a background colour, while leaving the others plain.

Flexbox: lining things up

Flexbox arranges items along one line, either a row or a column, and decides how they share the space on that line. It is perfect for smaller groups: a toolbar of buttons, a row of tags, a header with a title on one side and actions on the other.

Its main settings, on the Styles tab under Layout, are:

Setting	What it decides	Example
Direction	Whether items sit in a row (side by side) or a column (stacked)	Row for a toolbar, Column for a stack of cards
Justify content	How items are spread along that line	Space-between puts the first item at one end and the last at the other
Align items	How items line up across the line	Center keeps a short button level with a taller heading
Gap	The space between items	8px between two buttons
Wrap child elements to multiple lines	Whether items flow onto a new line when they run out of room	A long row of tags continues on the next line

Gap and wrapping are under Show advanced layout options, so look there if you cannot find them.

Grid: rows and columns together

Grid is the one to use when items must line up both across and down, like the TV listings. You set the number and width of Columns and Rows, a Gap between the cells, and a Direction that decides whether new components fill across or down first. A component can also span more than one cell, which is how a big chart can sit beside smaller tiles on a dashboard.

Grid is the most powerful of the three, but you need it less often than you might think. If the content only needs to sit side by side, a column layout is simpler. Reach for Grid when the rows matter as much as the columns.

Which one to use

Use	When	Typical example
Column layout	Big sections of a page sit side by side, with set widths	List and side panel, form and activity stream
Flexbox	A small group of items lines up in one row or one column	Header with buttons, a row of tags, centred buttons
Grid	Items must line up in rows and columns at the same time	Dashboard tiles, a calendar, a gallery

Most real pages mix them. A column layout splits the page into sections, and inside one of those columns sits a Flexbox row of buttons. Press Play to watch a page get built exactly like that.

1. Empty
2. Columns
3. Widths
4. Header
5. Spacing
6. Mobile

Page

1. Step 1 of 6 · Empty

   Start with an empty page

   You want a Team queue page: a header with a title and two buttons, a big list of incidents, and a small side panel with quick stats. With no layout, every component you add simply stacks under the one before it, full width, top to bottom.

   Layout

   (none: components stack top to bottom)

   Columns

   -

   Widths

   -

   Header

   -

   Gap

   -

   Stack below

   -

2. Step 2 of 6 · Columns

   Add a two-column layout

   From + Add content, you open the Layouts tab and pick a two-column option under Basic. The page now has two empty columns side by side, ready to hold components. The list will go in the first one, the stats in the second.

   Layout

   Column layout (Basic)

   Columns

   2

   Widths

   50% | 50%

   Header

   -

   Gap

   -

   Stack below

   -

3. Step 3 of 6 · Widths

   Give the list more room

   A list needs space, so you drag the divider between the columns until they read 70% and 30%. The percentages always add up to 100%. You also rename the columns to Main and Side panel, so the Content panel is easy to read later.

   Layout

   Column layout (Basic)

   Columns

   2 (Main, Side panel)

   Widths

   70% | 30%

   Header

   -

   Gap

   -

   Stack below

   -

4. Step 4 of 6 · Header

   Build the header row with Flexbox

   Above the columns, you add a Flexbox layout and put a Heading and two Buttons in it. Direction is Row, so they sit in one line. Justify content is Space-between, which pushes the heading to the left edge and the buttons to the right.

   Layout

   Flexbox header + Column layout

   Columns

   2 (Main, Side panel)

   Widths

   70% | 30%

   Header

   Row, Space-between

   Gap

   -

   Stack below

   -

5. Step 5 of 6 · Spacing

   Add breathing room

   Everything is touching, so you set a Column gap between Main and Side panel, and a Gap inside the header so the two buttons do not stick together. Gap adds space only between items, never around the outside, which is why it is cleaner than adding margins to every component.

   Layout

   Flexbox header + Column layout

   Columns

   2 (Main, Side panel)

   Widths

   70% | 30%

   Header

   Row, Space-between

   Gap

   Columns: 24px, header buttons: 8px

   Stack below

   -

6. Step 6 of 6 · Mobile

   Make it work on small screens

   On a phone, a 30% side panel would be a thin strip. Under Show advanced layout options, you set Stack columns to 768px. When the window is narrower than that, Side panel moves below Main and both take the full width. You test it with Preview, Open URL path, and by resizing the window.

   Layout

   Flexbox header + Column layout

   Columns

   2 (Main, Side panel)

   Widths

   70% | 30% (stacked on small screens)

   Header

   Row, Space-between

   Gap

   Columns: 24px, header buttons: 8px

   Stack below

   768px

← Back▶ PlayNext →

Making pages work on small screens

Wide monitors, laptops, tablets and phones all open the same page. Columns that look balanced at full width can become too narrow to read on a small screen, so column layouts have a way to stack.

Select the layout, go to Layout in the configuration panel, and choose Show advanced layout options. Under Stack columns, enter a width. Whenever the browser window is narrower than that, the columns on the right move below the first column, and each takes the full width. This only appears on layouts with two or more columns.

The same advanced options let you set a Height, Min. H and Max. H for the layout. This is handy for tall components like a list, so it scrolls inside a fixed area instead of making the whole page endlessly long.

To test stacking, do not rely on the stage alone. Select the arrow next to Preview, choose Open URL path, and resize the browser window until the columns move.

See it in your instance

1. Open UI Builder in your PDIPDI (Personal Developer Instance)A free ServiceNow instance you get from developer.servicenow.com to practise on safely.Learn more → and open the page you built in the Foundations module, or create a new test page in the same experience.
2. Select + Add content, open the Layouts tab and add a two-column option from Basic.
3. Drag the divider until the columns read about 70% and 30%. Then try Distribute columns evenly and watch them snap back to equal.
4. Add a Heading into the first column and a Button into the second. Notice in the Content panel that both sit indented under their columns.
5. Add a Flexbox layout above the columns, put two Buttons inside it, and on the Styles tab try different Justify content options.
6. Select the column layout, open Show advanced layout options and set Stack columns to 768px. Save, open the page with Preview and Open URL path, and make the window narrow.
7. Delete what you added, or undo your changes, if you want to keep your challenge page as it was.

Practice: columns, Flexbox or Grid?

PracticeColumns, Flexbox or Grid?

Each card describes part of a page. Pick the layout you would reach for first. More than one can work sometimes, but one is clearly the easiest fit.

Column layout0

Flexbox0

Grid0

1. A record page with the form on the left, taking about two thirds of the width, and the activity stream on the right.

   Column layoutFlexboxGrid

   Answer: Column layout. Big side-by-side sections with set widths are exactly what column layouts are for. Drag the divider to 66% and 34%, and stack the columns on small screens.

2. A header strip with the page title on the far left and three buttons pushed to the far right.

   Column layoutFlexboxGrid

   Answer: Flexbox. One line of items, spaced along that line. Direction Row with Justify content Space-between does it in two clicks.

3. A dashboard of six score tiles in three columns and two rows, where one large chart takes up the space of two tiles.

   Column layoutFlexboxGrid

   Answer: Grid. Rows and columns that must line up both ways, plus an item spanning two cells, is what Grid is built for.

4. A row of tags on a record, such as "VIP", "Network" and "Escalated", that should flow onto a second line when there are too many to fit.

   Column layoutFlexboxGrid

   Answer: Flexbox. Flexbox with wrapping turned on lets items fill one line and continue on the next, like words in a sentence.

5. Three equal sections side by side, Open, In progress and Resolved, each with its own list and its own border colour.

   Column layoutFlexboxGrid

   Answer: Column layout. Three columns, each styled separately and each holding its own components. Use Distribute columns evenly to keep them equal.

6. A month calendar view: seven days across, five or six weeks down, every box the same size.

   Column layoutFlexboxGrid

   Answer: Grid. A true two-dimensional table of equal cells. In Grid, you set seven columns and let the rows follow.

7. A "Save" and a "Cancel" button sitting next to each other, centred under a confirmation message.

   Column layoutFlexboxGrid

   Answer: Flexbox. Two items in a row, centred with Justify content set to Center and a small Gap between them. No columns needed.

8. A main list of incidents with a narrow filter panel on its right, where the filter panel should drop below the list on phones.

   Column layoutFlexboxGrid

   Answer: Column layout. Two columns of different widths, plus the Stack columns option: below the width you set, columns on the right move under the first one.

Try again

What’s next

You can now arrange components with column layouts, Flexbox and Grid, space them with gap, and make columns stack on small screens. In the next lesson, Repeating content with the Repeater, you will learn how to show the same component once for every record in a list of data, such as one card per incident.