A responsive grid

The grid layout uses a flexible responsive grid that allows the user to set a maximum number of columns (1-6) per module. The columns will automatically resize and display your content so it's always displayed at an optimum width. 

Images loading please wait ...

 

Maximum number of columns explained

This means that at it's widest point the grid will only be displayed in 1,2,3,4,5 or 6 columns. At screen widths larger than the desktop breakpoint the module will always display the maximum number of columns. At sizes smaller than the desktop valkue the grid will display in fewer columns that make your content more readable.

An example 

For instance if you set the large screen value to 1200px, medium screen value to 800px and the small screen value to 600px and the maximum column option to 4, when the browser is above 1200px the module will always display it's items in 4 columns.

On screens smaller than the desktop width the module will revert to 3 columns (in between 800px and 1200px) for medium screen sizes and 2 columns for screens larger than small screens and smaller than medium screens (600px to 800px). And for screens smaller than the small screen width (600px) the module will collapse to a single column layout.

Custom Screensizes

The module allows you to determine the value assigned to each screen size on a module per module basis or for all instances of the Zentools module, giving you complete control over how how your content displays in your template across a range of screensizes.

 

Maximum 4 column grid

The Grid below is set to display in a maximum of 4 columns. The settings in the module determine the points at which the grid resolves to 3,2 and 1 column.

  • Cold-feet
  • Red-checker
  • Orange-van
  • Post-surf-surge

 

Maximum 2 column grid

The Grid below is set to display in a maximum of 2 columns. The settings in the module determine the points at which the grid resolves to 3,2 and 1 column.

  • Orange van

    Orange van

  • Southside

    Southside

 

Columns within grids

The Grid below is set to display in a maximum of 2 columns. The settings in the module determine the points at which the grid resolves to 3,2 and 1 column.

  • Plinety ablow

    Plinety ablow

    Phasellus volutpat aliquam bibendum. Nulla vel est eu dolor congue ...
  • Roadless

    Roadless

    Fusce volutpat metus quis est convallis aliquet eu vel ligula. Nullam dolor arcu, interdum ut risus ...
  • Violet paddle

    Violet paddle

    Donec in auctor odio. Vestibulum condimentum mi dictum velit consequat ullamcorper. Sed nec eros ...
  • To Winki

    To Winki

    Donec in auctor odio. Vestibulum condimentum mi dictum velit consequat ullamcorper. Sed nec eros ...

 

Marginless grid

The Grid below is set to display in a maximum of 2 columns. The settings in the module determine the points at which the grid resolves to 3,2 and 1 column.

 

Grid with overlay

The grid below is displaying a maximum of 3 column grids, with no margins and the title element overlaying the image.

 

Marginless grid with animated overlay

The grid below is displaying a maximum of 3 column grids, with no margins and the title element transitions into view when the user hovers over the image.

 

Boxed theme with equal heights enabled

The grid below uses the boxed theme and the setting to make the items equal height enabled. The equal height settings ensures that your grid of items maintains a uniform and consistent display.

  • Cold feet

    Cold feet

    Sed varius nunc nulla. Nunc pulvinar eu erat vel pretium. Aenean hendrerit condimentum diam. Nullam egestas sapien et vulputate interdum.
  • Post surf surge

    Post surf surge

    Donec sed libero euismod, condimentum elit vitae, varius felis. Sed vitae condimentum leo. Phasellus ut enim quis nibh lacinia sollicitudin eget et lacus. Suspendisse fermentum aliquam lacus a congue. Aliquam varius libero id feugiat tincidunt. ;;Donec sed libero euismod, condimentum elit vitae, varius felis. Sed vitae condimentum leo. Phasellus ut enim quis nibh lacinia sollicitudin eget et lacus. Suspendisse fermentum aliquam lacus a congue. Aliquam varius libero id feugiat tincidunt.

 

Boxed theme with equal heights disabled

The grid below uses the boxed theme and the setting to make the items equal height disabled.

  • In-the-fields

    In-the-fields

    Morbi non ultrices velit. Curabitur ut ultrices diam. Mauris nec dolor sodales, dictum arcu sed, placerat nulla. Curabitur faucibus, sapien ac cursus scelerisque, mauris ante gravida massa, elementum auctor orci ante sed eros. Maecenas facilisis elementum ligula, eu pulvinar nunc aliquet id. Sed semper ex est, vel ultricies magna viverra quis. Etiam feugiat porta venenatis.
  • Couch-man

    Couch-man

 

The grid can also maintain it's columns on small screens

The grid below uses the setting called Enable grid on small screens to ensure that the grid items do not collapse when viewed on a small screen.

 

Themes and other display options

Themes

The grid layout also includes a number of different theme options. They include:

  • none
  • boxed
  • overlay
  • animate overlay
 

Display options

Other display options include:

  • make each item equal heights
  • remove the margin between items
  • maintain it's columns on small screens.
  • Display loading animation and delay the display of images until all images have loaded
 

Effects

The grid layout also has the option to provide an animated effect for when the item is visible on the screen. When this option is enabled and if the item is visible on the screen on page load or becomes visible on the page as the user scrolls the item is transitioned onto the page.

The available effects include:

  • fade
  • fade from left
  • fade from top
  • fade from right
  • fade from the bottom.