Column layouts organize components on a UI Builder page. Learn how column layouts are used in UI Builder.

Column layouts enable you to create useful and visually appealing pages in an experience. A column layout is a type of flexible container that can hold components. Column layouts can have columns of equal or different widths. You can configure the column layout as a whole and the individual columns within the layout. For example, set a different border width and color for a column layout and for the individual columns within the layout. Column layouts can contain empty columns on a UI Builder page to create white space. Use multiple column layouts on a page. For example, a two-column layout could contain a header and image, then a three-column layout below it could hold more components like a list and form.

Think about the layout of your page before you begin building it. Analyze what you want to achieve and how complex the page layout must be. These questions determine what type of column layout or layouts you should use.

Examples of column layouts available in UI Builder.

Column layouts in UI Builder use standards-based Cascading Style Sheets (CSS) rules and web layout technologies such as Flexbox, CSS grid, and absolute positioning. So whatever you can do in CSS you can do here. Visit Mozilla to learn more about CSS.
Note: If you have existing UI Builder pages created in an earlier release (Utah or Tokyo), you can upgrade to Vancouver or Washington DC and add column layouts to the pages.