Design Approach
Flex layouts are created from a hierarchy of "mini layouts", with some responsive behaviors assigned to them. Creating this hierarchy and assigning behavioral rules to achieve responsive behaviors can seem daunting at first – so, to ease the process of creating rule-based, hierarchical layouts, we have created a design approach that will achieve almost any responsive web design.
Flex Grid
The design approach that we followed is, to use Grids. But unlike grids in print, these grids have to be adaptive to different sizes and should work well with HTML on all browsers.
Typical page grid vs the flexible grid in QuarkXPress, where vertical grid guides are available for reference and responsive components can be used to create a responsive rule-based grid
To conceive a design in the form of a grid, using CSS-Flex, a designer needs two things:
1. Grid guides on canvas, as a reference to our design elements
2. Responsive components that understand the grid guides and honor them
Flex layouts are independent of the target device-width, so grid provides our reference point to place elements onto the page, and acts as a guide to align them with each other.
Once items are placed on the grid, the grid system can then be adjusted to fit different device sizes.
Different layouts for phone and tablet devices
Grid guides can be added for flex layouts, using the New Project Dialog. The dialog allows to specify:
• Grid Size
• Number of Columns
• Gutter Width (Padding)
Screen Shot 2019-06-28 at 2.49.24 PM.png
Some out-of-the-box responsive components are introduced, that can help you create a flexible grid. These components are Container, Row, and Column. Each of these components is a type of container box, with some specific responsive rules applied.
Container, Row and Column components
Container Component
• A container component is a container box that occupies 100% device-width
• The container is grid-width independent
• It is generally used to hold grid rows
• Each container can have one or more rows/sections
• Container component can also contain other containers
Drag n drop Container from the Basic tab of Layout Blocks palette onto Flex Grid
Drag n drop Row from the Basic tab of Layout Blocks palette into a Container
Row Component
• A row is a grid aware container box
• It always keeps itself aligned with grid boundaries. The row has max-width set to the grid width specified in new dialog.
• The row is used to contain Columns
• Rows are placed inside Container
• Rows with special column arrangements are called Sections
Column Component
• Columns are sub-containers of a row that forms a grid
• Each column container, by default, has one column width; which can be changed on an as-needed basis. For example, a column container can be set to occupy three column width of a grid.
• Columns are generally used to hold the content elements like picture box, text box, etc.
• Columns can be nested
• A specific arrangement of columns with content elements is called a Component
Adding a column to a row by drag n drop from Basic tabs of Layout Blocks palette
Responsive Grid
Common components required to create responsive grids include:
Grid Guides  — provide reference points to place elements onto the page
Container —  occupies 100% device-width, independent of the grid and provides a way to contain rows
Row  —  grid-aware container box, which always keeps itself aligned to the grid boundaries, and acts as a row of a grid
Column  — a container box that can be part of a row, to form a grid
Content Boxes  — text and picture boxes that can hold content and are, usually, contained within a column
Note: Container, Row, and Column are all Container Boxes with some container box properties set in a certain way to achieve different behaviors.
Making of a grid using Container, Row, Column and Content Boxes