> For the complete documentation index, see [llms.txt](https://docs.norrnext.com/norrcompetition/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.norrnext.com/norrcompetition/modules/norrcompetition-grid.md).

# NorrCompetition Grid

This module allows to filter entries by contests with a responsive grid layout and animated sorting effects.

The **NorrCompetition Grid** module displays contest entries in an interactive, responsive grid layout powered by Shuffle.js. Visitors can dynamically filter entries across multiple contests, sort results instantly on the frontend (by rating, name, latest, random), load more items via AJAX, or open entries in a lightbox modal.

<figure><picture><source srcset="/files/AEVmF8uUUlL2nSIY6gY6" media="(prefers-color-scheme: dark)"><img src="https://4110454137-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FemWP543OtNCmlHpJBjKV%2Fuploads%2Fgit-blob-ce25bc1ad6a5a9ef4d7f1dec4d60e24f1dcdebcd%2Fnc-module-grid-min.png?alt=media" alt="NorrCompetition Grid module settings"></picture><figcaption><p>NorrCompetition Grid settings</p></figcaption></figure>

### Basic Options

* **Count** - The total number of entries to display in the grid module.
* **Entry Title Length** - Truncates the entry title to the specified character length.
* **Contests** - Select one or more contests from which entries are fetched. The selected contest titles also serve as tags in the frontend filter navigation.
* **Contest Title Length** - Truncates the contest tag titles to the specified character length.
* **Order** - Default initial ordering for entries:
  * *Rating* - Sort by votes / rating.
  * *Ordering* - Backend manual sort order.
  * *Created Date* - Sort by submission timestamp.
  * *Random* - Randomize initial entry order.
* **Order Direction** - Default sort direction: *Ascending* or *Descending*.

### Filter

* **Use Filter** - Show or hide the contest filter navigation buttons above the grid.
* **Show button 'All'** - Show or hide the *All* button in the filter navigation bar.
* **Load init script in head** - Load JavaScript initialization scripts into the `<head>` section of the page instead of inline.

### Load More (AJAX)

* **Show 'Load More'** - Enable or disable the *Load More* button for AJAX pagination.
* **Display default** - The initial number of items displayed on page load. Enter `0` to load all items at once.
* **Load on** - Number of additional entries fetched with each *Load More* button click.

### Sorting

* **Use Sorting** - Show or hide frontend sorting buttons above the grid.
* **Default** - Show or hide the *Default* sort button.
* **Name** - Show or hide the *Name* sort button (sorts alphabetically).
* **Reverse Name** - Sort by name in reverse order by default.
* **Rating** - Show or hide the *Rating* sort button (sorts by votes/rating).
* **Reverse Rating** - Sort by rating in reverse order by default.
* **Latest** - Show or hide the *Latest* sort button (sorts by creation date).
* **Reverse Latest** - Sort by latest in reverse order by default.
* **Random** - Show or hide the *Random* shuffle button.

### Style

* **Filter class** - Custom CSS class applied to the grid item container.
* **Filter Nav class** - Custom CSS class applied to the filter navigation bar.
* **Sorting Nav Class** - Custom CSS class applied to the sorting navigation bar.

### Grid

* **Columns** - Number of grid columns across desktop screens (from `1` to `6`).

### Main Layout Settings

* **Image** - Show or hide the entry thumbnail image.
* **Thumbnail Size** - Select the thumbnail image size: *Big*, *Medium*, or *Small*.
* **Image Link** - Enable or disable wrapping the image in a clickable link.
* **Lightbox** - Open the full entry image or video in a lightbox modal popup instead of navigating to the entry page.
* **Lightbox Image Size** - Select the image size used within the lightbox modal: *Big*, *Medium*, or *Small*.
* **Title** - Show or hide the entry title.
* **Title Link** - Link the entry title to the full entry page.
* **Contests** - Show or hide the contest tag badge below the item.
* **Contest Link** - Link the contest tag badge to the corresponding contest page.
* **Votes** - Show or hide the entry vote count or average rating.
* **Voting** - Show or hide the interactive vote/rate button directly within the grid items.

### Advanced Options

* **Alternative Layout** - Select an alternative module layout if one exists in the template or module `tmpl/` directory.
* **Module Class Suffix** - A suffix applied to the CSS class of the module for custom styling.
* **Caching** - Choose caching mode: *Use Global* (inherit from global configuration) or *No caching*.
* **Cache Time** - The time (in seconds) before the module content is recached.

***

See [live demo](https://norrcompetition.norrnext.com/add-ons/grid-module) of Grid module.

<figure><picture><source srcset="/files/mPuTQ4hwSxk22kJfrYnb" media="(prefers-color-scheme: dark)"><img src="https://4110454137-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FemWP543OtNCmlHpJBjKV%2Fuploads%2Fgit-blob-c2c0c5f799a36715bf862829ff8cdbe6d3b4cf4d%2Fnc-module-grid-front-min.png?alt=media" alt="NorrCompetition Grid module - front-end"></picture><figcaption><p>Grid module - front-end</p></figcaption></figure>
