Skip to main content

Structure

Row Type #

The row type will control the sizing of your row content and row background layers. Below we will compare each of the available row types. The red highlight is a representation of the content area.
Row Type: In Container #

The “in container” row type will constrain the background layer as well as the content. This row type also adds a small bit of bottom margin by default, so if you’re looking to make your rows flush against each other, use one of the other two types.

Row Type: In Container #

The “in container” row type will constrain the background layer as well as the content. This row type also adds a small bit of bottom margin by default, so if you’re looking to make your rows flush against each other, use one of the other two types.

 

Row Type: Full Width Content #

This is a row set to the “Full Width Content” type with a background color. It allows both the row background and any content inside it to display the full width of the browser window.

#

Column Margin #

The column margin allows you to define the amount of spacing between each of the columns in your row.

#

Equal Height #

Allows you to keep the columns within your row at an equal height regardless of how much content is in them. To make this noticeable, a background of some sort would need to be set on the column. You can also choose how the shorter content will be aligned (top,middle,bottom).

#

Column Direction #

Allows you to control the direction in which your columns will flow in the document. This option can be set to a different value for desktop/tablet/smartphone displays, which opens up powerful layout possibilities.

#

Full Height Row #

This will cause your row to automatically scale to the height of the browser window. When using this option, there’s no need to set any padding for the top/bottom of your row, as doing so will increase the height of your row beyond the height of the browser window.

Powered by BetterDocs

Leave a Reply