We start by adding a section, this will always be within the content of the page. Builder has sections and flex sections.
Sections:
Each element inside the section has its own toolbar, there are three containers:
Section (with blue border): This is the main container, it can contain more than one row.
Row (width yellow border): contains the columns and defines the number of columns it will have.
Column (width pink border): contain the widgets, these appear bordered in blue.
Flex Section:
As the section each element inside the flex section has its own toolbar, there are three containers:
Flex Section (with blue border ): This is the main container, it can contain more than one row.
Grid (with yellow border): contains the columns and defines the number of columns and rows it will have.
Flex Box (with pink border): contain the widgets, these appear bordered in blue.
Note: The difference between these two containers is that in flexible containers we can be more specific regarding the width and height of the row container as well as the behavior that the elements within the flex box(with pink border) will have.