Layout Grid FAQ

Frequently Asked Questions about Quick 'n Easy Web Builder
User avatar
Site Admin
Posts: 3943
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe

Layout Grid FAQ

Post by pablo »

In this FAQ we have collected frequently asked questions about the Layout Grid, so this will always be the first place to look before you start...
This information will be expanded in the course of time based on user feedback.

Note that the Layout Grid is available in Quick 'n Easy Web Builder 4 and newer.

How do I use the Layout Grid?
For an introduction to the Layout Grid please start here: ... part1.html ... part2.html

Do you have examples of the Layout Grid?
Here are a few experimental pages that were created with Quick 'n Easy Web Builder 4: ... gency.html ... ousel.html ... eejay.html ... sktop.html ... tures.html ... folio.html ... vices.html ... debar.html ... tpage.html ... rgrid.html ... deobg.html

These demos are available as templates on the website:

What are the pros and cons of using the Layout Grid?
The Layout Grid has several benefits compared to standard (fixed position) layout, but there are also drawbacks.
Some off the reasons for using the Layout Grid include

- Speed and efficiency
The Layout Grid makes it quick and easy to create responsive / flexible layouts. Images, text, videos and other objects will automatically be scaled based on the viewport size.
You do not have to create a different layouts for different devices. Although you may need breakpoint to optimize (or hide) certain objects for smaller screens.

- Maintainability
It will be easier to maintain the website because changes to the default view will also be reflected in breakpoints. Unless you mix the layout grid with fixed content (like floating layers) of course!

But, there may also be drawbacks:

- Less control
One of the main feature of Quick 'n Easy Web Builder is having lots of control over the layout.
When using a Layout Grid you are giving up some control over how your website is built. You can no longer place objects anywhere you want because object positions are floating (instead of fixed).

- Repetition
I can be more difficult to create a website that doesn't not look like other websites using layout grids (like website created with Bootstrap or another framework).

- The Layout Grid generates more code
Using the Layout Grid will add extra code for 'controlling' the layout. Websites with fixed/absolute positions will have lesser code.

- Not all objects supports the Layout Grid
Some objects cannot be part of a Layout Grid because they cannot be stretched automatically or they were designed to be fixed on the page.
For example: Layers, Forms, Tabs, Accordion. This behavior may change in future updates.

- Master frames and master objects cannot be used in combination with the Layout Grid. See below for more details.

How do I adding spacing between objects?
You can add 'Margin' to an object to create some spacing around it. Margin set be set via the context menu (right click) or in the Arrange menu.
Note that not all objects support margin. In that case you can use a solid or transparent horizontal line or shape to create spacers.

My Layout Grid does not have display the background I have selected!
By default a Layout Grid only has a height if there are object inside the grid column. If the column of the grid is empty then the height will be 0 and therefor it will not have a background. This is standard HTML/CSS behavior.
As a workaround you can enabled the option 'Fixed height' which will give the columns a fixed height.

Can a form be added to the Layout Grid?
No, but the Layout Grid itself can be a form! In the properties check 'Enable form' to turn the Layout Grid into form.
If you want a form with a fixed layout then you can use a floating layer instead.

Can Layout Grids be nested?
Yes, currently only one level nesting is supported.

How do I move a Layout Grid up or down the page?
You can use the Arrange tools (Move forward/ Move backwards) to rearrange Layout Grid.
The arrange tools are available in the Object Manager, Menus/Ribbon and in the context menu (right click). You can also use the '+' and '-' keys on the numeric keypad.

Can I use master frames in combination with the Layout Grid?
Yes, you will need to set the overflow property of the Content Place Holder to 'floating' to make it part of the floating layout. Note that this feature is available in QWB 4.1 and newer.
See the master frame tutorial for more details:

Can I use master pages inside a Layout Grid?
You cannot use master objects inside a Layout Grid. However you can use a page header/footer or floating layer in combination with Layout Grids and make the master object part of that layer.

Can I have different columns in breakpoints?
No, this is currently not possible. However this feature it is planned for the future.