Row and Container blocks configuration

Below is a description of the functionality of the main blocks on which the layout of the entire page content is based. Also, there are additional options and features that are important to know before using the WoodMart theme blocks.

A main difference from other popular page builders, which should be considered, is that any Gutenberg block can be placed directly into the root of the editor without the need for a wrapper. This allows for creating the most efficient HTML structure of the page without unnecessary wrappers. For example, to insert a simple title on the page, you don’t need to insert it into a row with a single column. If you need to build a more complex structure, align content in a certain way, or combine elements into a single wrapper, you can use the following blocks: Rows and Containers.

Rows and Columns 

The Row block allows you to create a simple multi-column layout on the page. This block contains sub-blocks of columns (up to a maximum of 12) and in terms of functionality, it is analogous to similar elements from other popular page builders.

By default, after adding the block, you can choose one of the predefined layouts that will affect the number of columns in the row and their overall width ratio. After selecting one of the layouts, you can also further customize it after starting to use it by switching the layout and the number of columns using the corresponding options.

In addition to the predefined layouts, the width of the columns can be adjusted by specifying their width in percentages or by manually changing the width of one of the columns by dragging the mouse cursor along the edge of one of the columns. 

Also, columns have all the necessary options for positioning content within the column vertically, horizontally, and adjusting the spacing between internal blocks.

The responsive positioning of columns within a row follows the following rules: by default, on desktop (viewport 1025 pixels and above), all columns are placed in one row regardless of their quantity. Starting from a viewport of 1024 pixels and below, columns can be moved to a new row by setting the total width of all columns in percentages greater than the width of the row. For example, if there were 6 columns in 1 row on a desktop, they can be configured to 3 columns in 2 rows on a tablet and 2 columns in 3 rows on mobile. 

Container

The Container is a versatile block for positioning content inside using CSS Flexbox layout rules. This element helps create more complex layouts and more efficient page structures. It can be used both in the root of the editor and placed in other blocks, allowing a wide range of tasks to be solved, such as arranging two buttons in a row, creating analogs of rows and columns (where the containers themselves act as columns placed one after another), adding a common background for a group of blocks, building flexible blocks whose width depends on their content and selected flex-grow, flex-shrink, and flex-basis rules and much more. 

The Container block has all the necessary options to precisely position the inner content using the options provided by CSS Flexbox, namely: Direction, Justify content, Align items, Wrap, Column & Row gaps.

Overall, the container allows for building a more efficient page HTML structure by adding wrappers exactly where needed, however, it requires a more advanced knowledge of CSS Flexbox. Therefore, users are provided with an alternative in the form of row and column blocks. It’s also worth noting that containers and rows can be nested in each other in any combination, allowing tasks of various complexity to be accomplished.

For a more detailed understanding of Flexbox content positioning, it is recommended to read the following article on the basic concepts of CSS Flexbox.