Made in Builder

Made in Builder

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Working with Child Layouts

The term child layout refers to how you arrange blocks that are within another block.

When you place one Builder element inside another, you can set child layout attributes on the outer element. Child layout options are only available on elements that have children inside them.

Often the outer, or parent, element is a Box block. Putting your content inside of a Box gives you access to all the child layout options in this document.

To edit the layout of blocks within a parent container, use Builder's Child Layout features to do the following:

Finding the Child Layout options

To display the Child Layout section, take the following steps:

  1. Select a parent container with child blocks
  2. Open the Style tab
  3. Go to the Layout section.

The Child Layout section only shows if the selected block has nested elements, also known as child elements.

How height and width affect alignment

One of the first considerations to keep in mind while using child layout settings is that all the properties discussed in this document are affected by the height and width of your elements.

For example, the screenshots below show three boxes with text blocks inside. There are no height or width constraints on any of the colored boxes and they are constrained only by the text inside them. The outer, gray box on the left has a min height of 400px, and because the children are set to the flex-direction of column, they will take up all the vertical space available. Thus they are distributed evenly over the 400px height.

Their widths are dictated by the horizontal space needed for the text. If there was no text in these inner boxes, they would collapse because the boxes have no height set.

The image on the right shows the same outer box, but with a min height of 200px. The inner boxes still take up all available vertical space, but no more.

No heights or widths on children

Parent min height of 400px

Flex-direction: Column

No heights or widths on children

Parent min height of 200px

Flex-direction: Column

The following two screenshots illustrate the effect of parent width on child elements. This time the inner boxes are arranged in a row.

In the image on the left, the outer box has a max width of 200px. Because the boxes with the text in them require more than 200px of horizontal space in total, the inner boxes extend beyond the bounds of the outer box.

That problem can be solved using the wrap property, illustrated in the screenshot on the right.

To use Wrap, select the outer/parent box, and on the Style tab in the Child Layout section, click the Wrap button, as shown in the image on the right.

No heights or widths on children

Parent max width of 200px

Flex-direction: Row

No heights or widths on children

Parent min height of 200px

Flex-direction: Row

👉 Tip: For further understanding of the impact of widths, refer to How Width Affects Layout.

The properties in the Child Layout section are based on the CSS Flexbox model. If you're not familiar, Flexbox offers the flexibility not previously available for web layouts. However, it takes a bit of practice to both understand what the properties do, and to achieve the layout you want.

For these reasons, some additional exploration of Flexbox can help you get the most of the framework. Experimenting in the Builder Visual Editor can help. In addition, if you want external tutorials, check out these pages:

Converting blocks to columns

One of the options in the Child Layout section is the Columns setting. You can convert your blocks to columns by following these steps:

  1. Select the parent block.
  2. Open the Style tab.
  3. In the Child Layout section, click Columns–the first button on the left–to convert to Columns.

The video below shows the process.

For more information about columns, refer to Using Columns to Build Responsively and Convert a Layout to Columns.

Arranging blocks in a horizontal row

To arrange blocks horizontally, take the following steps:

  1. Select the parent block.
  2. Open the Style tab.
  3. In the Child Layout section of the Style tab click the button with horizontal dots.

The following video illustrates the process.

Stacking blocks vertically

To create a vertical layout, take the following steps:

  1. Select the parent block.
  2. Open the Style tab.
  3. In the Child Layout section of the Style tab click the button with vertical dots.

Wrapping blocks

You can set your blocks to wrap using the Wrap property in the Child Layout section.

To set wrapping:

  1. Select the parent block.
  2. Open the Style tab.
  3. In the Child Layout section of the Style tab click the button with the grid.

The video below shoes the steps, and illustrates the blocks wrapping on smaller screens.

The wrap property defines whether the child elements are displayed in a single line or can be flowed into multiple lines when necessary.

For more information on grids, refer to How to Make a Grid Layout.

Arranging blocks to scroll

The Scroll property keeps the child elements in a row and prevents them from wrapping. Therefore if the width of all the elements is wider than the page, a horizontal scroll bar is added and the user can scroll back and forth to view all the elements.

You can use this option if you don't want to increase the height of your layout if you want users to scroll right and left, or you don't want the child elements to wrap, for example.

To wrap blocks, take the following steps:

  1. Select the parent block.
  2. Open the Style tab.
  3. In the Child Layout section of the Style tab click the Scroll button, which contains three dots within angled brackets like this: <···>

Justify Content for horizontal alignment

Using the Justify Content section helps you layout child elements horizontally so that they are responsive and use Builder Best Practices by default.

The following options are available in the Child Layout section for Justify Content:

Top: Align your elements at the top of the parent element.

Center: Align your elements in the center of the parent element.

Bottom: Align your elements at the bottom of the parent element.

Space between: Position your elements with space between elements.

Space around: Position your elements with space before, between, and after.

The following image shows where to find the Justify Content section within the Style tab, in the Layout section.

Space Between adds space between the elements in the row, but not at the beginning or end:

Space Around adds space between the elements as well as before and after.

The final option in the image above is to add data bindings.

If you choose to add a data binding, then the other properties in that menu will not be available to set in the editor; instead, you can set them based on conditions you set in code.

To see how that's done, refer to Connecting Dynamic Data in Builder's Visual Editor.

Align Children for vertical alignment

Using the Align Children section helps you lay out child elements vertically so that they are responsive and use Builder Best Practices by default.

The following options are available in the Child Layout section for Align Children:

Left: Align your elements to the left of the parent element.

Center: Align your elements to the horizontal center of the parent element.

Right: Align your elements to the right of the parent element.

Stretch: Fills the available space evenly inside your parent element.

The following image shows where to find the Align Children setting in the Layout section of the Style tab under Child Layout.

Combining Justify Content and Align Children

Justify Content and Align Children work together to lay out your content in a flexible and responsive manner. Each property influences the other. While it can take a bit of experimentation to achieve your layout goals, the following images illustrate a few combinations.

Justify content: Space Between

Align children: Center

Direction: Column

Justify content: Space Around

Align children: Bottom

Direction: Row

Justify content: Space Around

Align children: Left

Direction: Column

Justify content: any

Align children: Stretch

Direction: Column

Justify content: any

Align children: Stretch

Direction: Row

Justify content: Left

Align children: Center

Direction: Row

Try out the properties

👉 Tip: The following Builder interactive samples are created in Builder. If you want to try creating your own, you can see how it's done in Creating a Section with a Changeable Background. That document will get you started creating actions when a user hovers or clicks an element.

Rows and columns

To see the Row and Columns properties in action, click Column or Row below:

ColumnRow

Dress Fabric sample 1

Dress Fabric sample 2

Dress Fabric sample 3

Justify Content

To see the Justify-Content properties in action, click a property below:

LeftCenterRightSpace AroundSpace Between

Dress Fabric sample 1

Dress Fabric sample 2

Dress Fabric sample 3

Align Children

To see the Align Children properties in action, click a property below. They behave differently based on whether your layout is set to rows or columns, so try both.

Row

Column

TopCenterBottomStretch

Product 1

Product 2

ColumnLeftCenterRightStretch
RowTopCenterBottomStretch

Product 1

Product 2

Next steps

For more ideas for flexible layout options, refer to these documents:

For more information on element widths and alignment, refer to:


Need Expert help?

Submit a project to our partners, BuildQuick, and be matched with a Builder expert.

Submit a project

Was this article helpful?