Advanced Layout Grid Features

Quick 'n Easy Web Builder 5 introduces a couple of powerful new features for the Layout Grid.
If you are not familiar with the basic Layout Grid functionality then please read these related tutorials first:
http://www.quickandeasywebbuilder.com/layoutgrid_part1.html
http://www.quickandeasywebbuilder.com/layoutgrid_part2.html


Use different column widths in breakpoints
To set a different column width, simply switch to the breakpoint, open the Layout Grid properties and change the column width.


Use different column counts in breakpoints / hide columns
To use a different number of columns, simply switch to the breakpoint, open the Layout Grid properties and add or remove columns.
It is also possible to hide columns in breakpoints. To hide a column, first select it and then uncheck the 'visible' option.
Note that hidden column is still visible in the grid editor (so you can unhide it) but it wil not take up any space on the page.
Overflow
When you have a different number of columns in breakpoints then some breakpoints will can have more columns that another. So you will need to tell the application what to do with the columns that do not fit in a single row. The overflow option controls what will happen when columns do not fit in the current row. Overflow columns can be hidden, 100% or have custom value.
hidden
Overflow columns will not be visible in the current view.

100%
Overflow columns will overflow to the next row and have a 100% width. Multiple over columns will result in multiple rows.

custom
This allows you to specify the width of each overflow column.

Use Flexbox
When this option is enabled, the grid will use CSS flexbox layout. This results in cleaner code and also enables some extra features like vertical alignment and entire column will be filled with the background. Note that this is a relative new CSS feature, it is not supported by older browsers (< IE11). Please check this website to see whihc browsers currently support flexbox: http://caniuse.com/#feat=flexbox
Copyright 2024 Quick 'n Easy Web Builder
Follow us on: