A note before starting: in this topic we are going to use Web Blocks with the parts of the content already designed for us.
In the example above, the page has two columns that grow independently:
Start by adding a Container for each column
Now, let's design the content of the second container that it's simpler:
Next, set the content of each container by inserting the corresponding web block.
As for the container for the first column:
So we have first to Organize Content in Rows:
And then Insert Columns in Rows in the container of the second row:
Notice how the second column has already grown and the first is still short. They grow independently.
Putting the web blocks in each container, it renders as follows.
To finish and in case you haven't noticed, there's another pair of columns in this design that grow independently: the section of FEATURED COMPONENTS and the MOST ACTIVE DISCUSSIONS.
And that's it! You have a web screen with two columns that grow independently, plus two more columns that grow independently inside a row.
To see how the above steps were performed in Service Studio watch the video below.
About the Grid