An introduction to the Layout Grid

An introduction to the Layout Grid - Part 2

This is the second part of the layout grid tutorial. See also: An introduction to the Layout Grid - Part 1

In this part we will implement a responsive layout by using the grid. This layout will have a header, footer and a content area with 3 columns.

Adding the header
Insert a layout grid. Set the column count to 1. Optionally set the background style.
Add a Heading object and drag it inside the grid. To create some extra spacing around the heading, the margin has been set to 10.

Adding content
Insert another layout grid. Note that the grid will automatically be postioned below the first grid. You can change the order of the grid with the Arrange Tools (Move Forward/Move Back).

Set the column count to 3.

This grid will have a menu, text and image. Note that although we have only added one object in this demo, you can put multiple object inside a column!

Adding a footer
The Layout Grid of the footer will have 5 columns. One for the copyrights (and other info) and the other 4 to align social media icons.

If you test this layout in the browser you will notice that everything will scale nicely when you change the viewport size.
When the window becomes smaller than 480 (= breakpoints) then all columns will automatically stacked.
Note that each grid can have its own breakpoint!