Topics Map > Page Builder
LCS - Advanced Layout Techniques
Understanding the different layout components in Betty Blocks
There are three major components when dealing with base layout in Betty Blocks. These are the Column, Row and Box. In legacy page templates you will also see the Grid component and we will talk about that at the end.
Column and Row
The column and row are a matched set, every column has a row, and you cannot drag a row onto the canvas by itself. Together these two components provide your pages with their flexible structure.
The Row sets the container's width and can be used to set the height. The Column or columns, as Rows can contain multiple columns, set the boundaries on what and how the components inside the column behave. Here are the key options that can enable more complex and interesting UI designs.
Column width
Columns can have equal or different column widths depending on orientation and screen size (in CSS we call this Media Query break points); this can be set from a value of 1 up to 12 where 12 is the entire width of the parent Row. It is often valuable to set the width of the Desktop differently than mobile or tablet views. The default for mobile is always 12 and it is best practice to leave it at that width unless you have specific reasons not to. Some common widths include:
- One column: 12
- Two Columns: 6 and 6 or 4 and 8
- Three Columns: 4 for each column
- Four Columns: 3 for each column
Alignment
The Alignment of a Column infers directly to the CSS properties of flexbox as in essence a Column is just an HTML div. Betty Blocks currently provides the following options for flexing a column:
- Horizontal: None, Left, Center, Right
- Vertical: None, Top, Center, Right
As one would imagine, selecting one of these options will force the components inside the column to align in that manner so “Horizontal Left” will align all the components to the left side of the column.
Styling
Currently Styling is limited to Inner space (CSS Padding), outer space (CSS Margin), height and background color. Use inner and outer space to give your column the separation or lack of separation that the intended design requires.
Box
The Box component is the workhorse of Betty Box UI customization in the current state of UI Styling.
Alignment
It provides in CSS terms the justify-content, align-items, and flex-direction properties. Betty Blocks calls these, Alignment, Vertical Alignment and Content Direction. 
Styling
As with the Column, Styling is limited to Inner space (css Padding), outer space (CSS Margin), height and width. Use inner and outer space to give your column the separation or lack of separation that the intended design requires.
Positioning
The Positioning options of a Box should not be used without a deep understanding of how CSS position property functions. This option set works the same as the CSS property so refer to CSS Docs on that:
MDN on CSS Position: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning
Background
The background section allows the setting of background color or image of the box.
Column and Box in Combination
Using the Column and box together can result in some advanced layouts and greatly enhances the options available to the developer. An example is creating a sticky footer where the footer will always be at the bottom of the page no matter what the height of the page content is.
LCS - Creating a Sticky Footer
Grid Component
The grid component in Betty Blocks was an early attempt to offer the flexibility of CSS flexbox with the built-in convenience of limited Data Container functionality in one component. The grid was often used and is still used in some public Betty Blocks page templates, like the header and footer template, to have a sticky footer as described above. With the expansion of the features of the box and column components in combination, the usefulness of a grid in Betty Blocks has dwindled to the point in which we do not recommend using the grid at all.
The Data Container functionality of being able to set a model on a grid is getting deprecated soon and will cause your pages to fail so do not use this feature at all, if you do still end up using a grid (though again, we do not recommend you use it as there are better ways to achieve the same effect).