Layout: Content Grid
In each Section, you'll find a Content Grid designed for easy drag-and-drop of content Blocks. When you start dragging a Block, the grid will highlight to guide you.
The Content Grid is made up of Rows, each containing one to four Columns. You can stack your content Blocks within these Columns.
When you add a Section to your page, the Content Grid is set up. Usually, all you need to do is adjust the grid by resizing Columns or reordering Rows, which we'll cover in detail in this section.
Grid Rows and Columns
When you hover your mouse over a row, it will be highlighted. You'll see the Row Menu at the top-left corner of the row and the Column Menu at the bottom-center of the column.
In this example, the Content Grid has 2 rows, each with 2 columns. only the top row is highlited because the mouse is hover over it.
Adding Rows and Columns to Content Grid
You can drag/drop an empty 2-columns row from the blocks menu or you can clone/duplicate any existing row or column in the grid.
Delete Rows and Columns
- You can delete rows or columns by clicking the trash icon
in the Row or Column menus.
- If the section has only 1 row, the trash icon will not be displayed to delete the row.
- If the Row has only 1 columns, the trash icon will not be displayed to delete the columns.
Change order of Rows and Columns
- You can drag a row from its menu as drag handler and drop it to change its order in the section.
- You can drag/drop rows between sections.
- You can drag a column from its menu as drag handler to change its order in the row.
Clone Rows
- You can duplicate an existing row or column by clicking the clone icon
in the menu.
- Press CTRL key while dragging row to duplicate it between sections instead of moving it.
Resize Columns
If the row have 2 or 3 colums, drag the resize icon 
to resize the width of the columns.
Row Settings
Click on the gear icon 
on the Row Menu to open Row Settings.
Columns Layout on Mobile screen
When the Row has more than 1 column, Switch to Mobile view while the Row Editor is opened to control how the columns can be sorted in mobile view. The editor will show the available options depending on the number of columns in the row.
In this example, the row has 3 columns, the columns are sorted vertically in mobile view.
Same previous example, but with Reverse Columns Order, the third column now on the top.
Same example but with the first 2 columns are placed horizontally and the third after them in full width.
Column Settings
Click on the gear icon 
on the Column Menu to open Column Settings.
Column Style
In this experimental feature, you can apply a variety of style behaviors to the columns. Currently, there's one style available: Card. The Card style will extend the width of the first Image Block and any Divider Block to the full width of the column, including the padding.
Default Style
In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content.
Card Style
In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content.
Blocks Alignment
Here you can control how to align and distrbute blocks inside columns, please note that this feature will be visible only if the height of the column is more than the heights of the blocks.
Align to top
Align to center
Justify blocks
Blocks Spacing
Control the space between the blocks inside a column.
Spacing value could be negative. Negative value will make blocks overlaped.
Spacing = 0
Spacing = 4 (default)
Spacing = 12
Padding
Control the space around the blocks.
No padding
Default Padding
Large Padding
Fit To Content
By default, The minimum column height will be the height of the tallest column in the row. when Fit to Content enabled, the column will be shrinked to its content only.
When the section vertical alignment of content set to Stretch 
, the columns will stretch to fill all section space disregarding the size of column content.
Content fit Enabled
Content fit disabled
Height of empty colums in mobile screen
Height of empty Columns - without blocks - in mobile screen will set to 50% of screen height (min-height: 50vh);
Animation Type
This section control how the Blocks appear inside the column when become in the viewport.
Repeat Animation
When enabled, the animation will be played every time the Blocks appear in the viewport.
In the examples, this option is enbled in the first column, you can scroll the page up and down and every time the animation will be played.
Animation Type= Zoom In
Repeat Animation= Off
Animation Type= Slide Down
Repeat Animation= On