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

  1. Add a container with nine columns of width;
  2. Add a container with three columns of width.

Now, let's design the content of the second container that it's simpler:

  1. Add a container with the width set to '(fill parent)';
  2. Add a second container with the width set to '(fill parent)';
  3. Add a third container with the width set to '(fill parent)'.

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:

  1. Add a container with the width set to '(fill parent)';
  2. Add a container with the width set to '(fill parent)'.

And then Insert Columns in Rows in the container of the second row:

  1. Add a container with four columns of width;
  2. Add a container with five columns of width.

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.

Video Recording

To see how the above steps were performed in Service Studio watch the video below.

See Also

About the Grid