---
title: "Extended Grid Element"
date: 2026-07-24
author: "Claude MCP"
---

# Extended Grid Element

**Extended Grid Element** is only available in the PRO version.  
Unlock this and other features by upgrading to **Joomill YOOtheme Elements PRO**

 The Extended Grid element is a flexible card grid. Each card can combine a title, meta text, description, up to 3 images, a video, an icon, up to 3 links, a social-icon block and a nested list, and you choose exactly where each of those pieces appears within the card. It also supports masonry layouts, a parallax scroll effect, and a filter navigation to let visitors narrow the grid down by tag.

 In the YOOtheme Builder, open the element picker and look for the **Joomill Extensions** group of elements, then select **Extended Grid**.

 
## Content tab

 
|  |  |
| --- | --- |
| Items | Add one or more cards. |
| Display | Show or hide the title, meta, content, image, video and link fields on every card without deleting the content itself. |

 
### Item

 
|  |  |
| --- | --- |
| Title / Meta / Content | The card's heading, small meta text and description. Content supports rich text formatting. |
| Image 1 / Image 2 / Image 3 | Up to 3 separate images per card, each with its own alt text, focal point and text color, positioned independently in the Settings tab. |
| Icon / Video | An icon from the icon library and a video, shown alongside or instead of the images. |
| Link 1 / Link 2 / Link 3 | Up to 3 links per card, each with its own text and ARIA label, and its own style set in the Settings tab. |
| Panel Link | Makes the whole card clickable to this URL, separate from Link 1/2/3. Requires "Link panel" enabled in the Panel settings. |
| List Items | An optional nested list of extra lines within the card, for example a feature list. |
| Social | Up to 5 social links, each with a link, ARIA label, icon and title. Paste a profile URL and a matching brand icon is detected automatically. |
| Tags | A comma-separated list of tags used by the Filter navigation, e.g. `blue, white, black`. |
| Panel Style / HTML Element | Give this individual card its own boxed or tile style, overriding the grid default. |

 
## Settings tab

 
|  |  |
| --- | --- |
| Masonry / Parallax / Parallax Justify / Parallax Start-End | Pack cards of different heights into a gap-free masonry layout, or move columns at different speeds while scrolling. |
| Column Gap / Row Gap / Divider / Column Alignment / Row Alignment | Spacing and alignment between grid columns and rows. |
| Columns (Phone/Tablet/Desktop/Large Screens) | Number of columns at each screen size, from 1 to 6, or Auto to size columns to their content. |
| Filter | Enable a filter navigation built from the Tags field, with its own animation, order (alphabetical or manual), style (tabs or subnav variants), an optional "All" control, position (top/left/right) and alignment. |
| Panel Style / Link Panel / Hover Style / Padding / Image Without Padding / Max Width / 1-Column Content Width / Image Height | The default boxed or tile style for every card, and how images sit within it. |
| Title / Meta / Content Style, Position (A–Z within the card), Alignment, Decoration, Color, Element, Margin | Style each text block and choose exactly where within the card it appears. |
| Images Layout | Stack Image 2 and Image 3 or show them side by side when placed at the same position. |
| Image 1 / Image 2 / Image 3 Width/Height, Loading, Border, Box Shadow, Box Decoration, Link, Hover Transition, Position (A–Z), Alignment, Margin, Inline SVG, SVG Color, Text Color | Each image has its own identical set of size, position and style options. |
| Video Position / Width/Height / Autoplay / Border / Box Shadow / Link / Alignment / Margin | Size, position and playback behavior of the video. |
| Icon Position / Width / Color / Link / Alignment / Margin | Size, color, position and optional link for the icon. |
| Social Style / Grid Direction / Column-Row Gap / Alignment / Show Title / Icon Width / ARIA Label / Attributes / Margin / Position | Style the social-icon block, including icon-only, button, or nav styles, and where it appears in the card. |
| List Type / Alignment / Marker / Marker Color / Style / Size / Divider / Content Style / Content Color / Icon / Icon Color / Icon Alignment / Margin / Position | Style the nested list and where it appears in the card. |
| Links Layout / Alignment / Position (per link) | Stack the 3 links or show them side by side, and place each independently in the card. |
| Link 1 / Link 2 / Link 3 Text / ARIA Label / Attributes / Download / Nofollow / Noreferrer / Style / Size / Full width / Margin | Each link has its own identical set of style options. |
| Position, Margin, Max Width, Alignment, Text Alignment, Animation, Item Animation, Visibility, Remove Container Padding | The usual layout options shared by all Builder elements. |
| CSS | Custom CSS for this element. Selectors `.el-element`, `.el-nav`, `.el-item`, `.el-title`, `.el-meta`, `.el-content`, `.el-image`, `.el-image-1/2/3`, `.el-icon`, `.el-link`, `.el-link-1/2/3`, `.el-list` and `.el-social` are prefixed automatically. |