Columns, Rows, Pagination and “Load More”

See about the basic Grid Settings that define the layout of your Essential Grid.

Table of Contents

1. Columns

Important Note

Before continuing, make sure to check out the Grid Layout documentation first to learn how your Grid Layout + Columns are directly impact the actual size of your individual grid items.

Essential Grid “responsive” behavior works by dynamically adjusting the amount of columns per screen size.  And the screen size “break points” are essentially the same as CSS media queries.  A total of 7 break-points are available, which will help to ensure that your grids look great on any device.

Column adjustments alter the size of your Grid Items…

Let’s say you’ve setup the “desktop” to have 5 columns, but based on your Grid Layout, the item content don’t quite fit, like the example below:

Instead of altering the content itself, with Essential Grid you can simply adjust the number of columns.   For the above example, adjusting the number of columns down to “3” will provide more room for the content to fit properly.

Advanced Columns

See here to view how the breakpoint values can be adjusted.

2. Rows

Grid Rows can be adjusted by setting the “Pagination” option to “Enable”, and then adjusting the “Max Visible Rows”.

3. Pagination

To add Pagination to your Grid, first enable it in the Grid’s Settings:

Next, visit the “Nav-Filter-Sort” tab, and add the “Pagination” element to one of the Grid Controls Dropzones:

Two types of Pagination Controls

Use the left/right Arrows with or without the “Pagination” control. In the following example, both have been added

1. Limit the number of pagination rows on mobile devices.

2. Enable autoplay for pagination.

3. Allow Touch Swipe functionality on Mobile Devices.

4. Load More

The “Load More” option can be used to dynamically fetch additional items.  This is especially useful for grids with a large amount of items.

There are two types of “Load More” options.  The first is a traditional button that the user can click.  And the second is an “Infinite Scroll” option, which will automatically fetch new items as the page is scrolled.

“More Button” Example:

https://www.essential-grid.com/template_library/garfield-wordpress-news-post-magazine-grid/

“Infinite Scroll” Example:

https://www.essential-grid.com/template_library/reagan-blog-post-overview-gallery-for-wordpress/

Next, choose how many items you’d like your grid to start with.  And then decide how many items should be “fetched” for the “Load More” action (when the button is clicked, or the page is scrolled).

Columns, Rows, Pagination and “Load More”

Further Resources for Web Design and Development Enthusiasts

Alright! We've embarked on quite an adventure exploring the realms of this topic. But why stop there? The world of web design and development is vast, and there's always more to learn and discover. Let's dive into some resources that'll keep your knowledge fresh, your skills sharp, and your passion ignited:

The Author

KC

Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

Liked this Post?
Please Share it!