In the image above, four zones are shown.
In the “Column drop” layout pattern, a zone moves to a new and its own “row” when the minimum width for that zone is not possible anymore on that row. When the screen has a small width, all zones are placed on top of each other.
As can been seen in the video (screen 4 in the app), this setup uses a main horizontal container which contains 4 responsive sub-containers. All sub-containers are configured to have a flexible width with equal portions.
The main point is that the minimum width should become a formula where the value is:
- dependent on the width of the main container.
- dependent on the breakpoints set.
This layout pattern is shown and described in detail in the video below.
In the formula’s below, a global variable is used:
In the formula for the sub-container as shown above, Container4 is the label of the main container.
The canvas app with the layout pattern described on this page can be downloaded from my GitHub repository.