Row

In this article, we're going to discuss the Row Element and its settings. The Row Element can be used to add rows across all product builders. Let's dive in!

  1. Setup
  2. Customize
  3. Summary

The Row element adds a row on the page. To add the Row Element, simply search for "Row" and drag "Row" to the canvas.

Setup

This section of controls allows you to set the amount of columns in addition to the layout of your Row all from the first couple controls in the Inspector:

Row Setup

An important distinction to make here is the difference between the Column Elements and “column layout” of your Row. "Columns" is where you add as many physical columns that you need in your Row, whereas "Layout" determines the percentage width for each Column in a specific position of the Row's layout. Column count is not limited by the layout of your Row. For example, you may wish to have 6 Column Elements within a Row and to have them laid out equally at 33.33% each. In this scenario, Columns 4-6 would visually appear on a new line but would still be within the same Row.

Let's take that example above and walk through how we would make it happen with the new Row. The first thing you would do is add 6 Columns to the Row:

Row Setup

Next, we would set the layout for the breakpoint we're working currently on (in this example we'll start with the XL breakpoint). There are multiple common preset configurations available to choose from such as 50% / 50%, 33.33% / 66.66%, et cetera. In this scenario, since we want 3 equal columns for our layout, we can choose the option below:

Row Setup

Which would create the following output (the Column Elements have been styled to make visualizing them a little easier):

Row Setup

You may have already noticed that there's something a little different to the Row when hovering over it: a faint, dotted line that appears within the vertical gaps of the Row. These are handles that can be grabbed within the live preview to horizontally resize the layout between adjacent Columns. The dotted line is only an indicator that appears on hover, but the entire gap is able to be dragged. Clicking down on any of the vertical gaps will reveal the following feedback:

Row Setup

The active handle that you are currently interacting with will highlight in addition to the tooltips that appear above each Column, revealing their current widths. As you begin dragging the handle, the layout will update in real time and the tooltips will also update accordingly. Additionally, if you hop back over to the Inspector you will find that the previous column layout preset will have changed to a "Custom Layout," reflecting the changes made by dragging the handles in the preview:

Row Setup

This process can be repeated for each breakpoint using the tabs to the left of the "Layout" controls. Expanding on our example above, we may wish for our 6 Columns to respond down to a 50% / 50% layout on our LG and MD breakpoins, and then go 100% on SM and XS.

A very unique layout hack to keep in mind is that the Column widths are set using flex-basis as the Row is powered by flexbox. Because of this, if you set the same custom fixed value (e.g. 200px, 20rem, et cetera) for every breakpoint then the Columns will respond not by breakpoint, but by ensuring that their own width never goes below that fixed value if possible. This is great for layout situations where you want to define a bunch of Elements that stick to a very specific max-width and just have them wrap as they need to. Again, to do this you would just need to set one fixed value at each breakpoint using the custom layout input like so:

Row Setup

One final interesting bit of information about the "Layout" control is that it will automatically switch the active tab to the breakpoint you're currently viewing in the builder. You can of course switch to any breakpoint you wish to style at any point, but this helps to ensure that you're starting your work on the breakpoint you most likely intend to be updating.

After setting up the general layout of your Row, you will find even more helpful controls in the "Setup" control group:

Row Setup

We can perform many common tasks such as setting the base font-size or a background-color, but you'll also find that there are many helpful improvments to the revamped Row.

Probably most helpful are the gap controls. The previous version of the Row had set horizontal gaps and did not have a way to set vertical gaps at all, often requiring users to resort to Gaps that would be shown/hidden across multiple breakpoints or custom CSS. Now, you can quickly and easily specify these values natively to have the Row space out its own Columns intrinsically. Remember that you will not see any vertical gaps until your Row's layout changes so that Columns are stacked one on top of the other.

The alignment controls are an incredibly powerful part of laying out the Columns within your Row as we have flexbox potential to tap into. This can allow us to achieve all sorts of unique layouts not possible in traditional builder grid systems. For example, let's take our 33.33% / 33.33% / 33.33% layout from before but remove one Column from it. By default, with the Horizontal Align control set to Start, your layout would appear as such:

Row Setup

Since we have extra horizontal space to distribute our Columns amongst the space our Row is occupying, if we adjust the Align Horizontal control we sill start to see different layout results emerge:

Row Setup
Row Setup
Row Setup
Row Setup
Row Setup

Additionally, if our colums have differing heights, we can use the Align Vertical control to distribute the placement of the columns within their respective row (note that for all of the examples below, we utilized an invisible spacer to achieve the different heights of these columns):

Row Setup
Row Setup
Row Setup
Row Setup

The final specialized controls for the Row that are important to note are the Reverse and Grow checkboxes. Starting with Reverse, let's take a look at the ordered content below:

Row Setup

Notice how the numbers appear from left to right as they would on a website utilizing LTR text directionality. If we turn on the Reverse checkbox, that would result in the following:

Row Setup

Engaging the reverse functionality effectively mirrors the appearance of your content horizontally. This is important to note as it does not have any actual effect on the order of your Columns (e.g. 5 does not appear in the place of 1, et cetera).

Utilizing this checkbox is most effective for situations where you might have alternating Sections of content on desktop (e.g. Image / Text then Text / Image) but on mobile you want them all to appear with either the text or image on top uniformly. Since Reverse only alters the horizontal appearance of our Rows, you can use Reverse for every other Section with this pattern, and it will automatically respond to the way you want it to appear on mobile. No more hiding / showing multiple Rows and Columns to achieve this particular layout!

Additionally, the Grow checkbox will force any Columns to fill all available space when possible:

Row Setup

This is simpily a stylistic choice and there are some situations where you might wisth to have a squared out Row of content, even if you do not have an even number of Columns available.

Customize

The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

  • ID - Use this option to set an HTML ID for the element. The ID should be unique on the page.
  • Class - Use this option to set an HTML Class for the element. You can use the class for your custom CSS code.
  • Element CSS - Use this option to have better control over the element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
  • Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
  • Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.
Custom Attributes

Summary

To sum up, we've discussed the Row Element. We've discussed that a Row Element is an easy tool for adding rows on a page and we've learned how to change it's content and design and delved into details of the Row Element settings.

See something inaccurate? Let us know