> For the complete documentation index, see [llms.txt](https://webvista-studio.gitbook.io/krank/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webvista-studio.gitbook.io/krank/sections/media-and-layout/media-grid.md).

# Media Grid

The Media Grid section allows you to display a flexible layout of image and video tiles. This layout is ideal for showcasing press features, brand collaborations, media content, or portfolio items.

<figure><img src="https://3867724846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5cjsG9gBFSIZ5CisPtcx%2Fuploads%2FNGRcSbpNdmqoyx9LL8pD%2F54a833de93664bcfda1a83a75b9efe0.png?alt=media&amp;token=eb74f9eb-b664-4bdf-ada5-824a91508529" alt=""><figcaption></figcaption></figure>

### 🎨 Color Scheme

Select or customize a color scheme to define styles for all content elements, including background, text, and buttons. Match your brand's visual guidelines for consistency.

***

### 🧱 Section Content

You can add a section title and the following supported blocks:\
Badge Group, Buttons, Button Groups, Countdown, Description, Discount Code, Follow Us, Title, Highlighted Stats, Icons, Icons with Text, Keywords, Link Group, Social Media List, Subtitle, Video Button, Spacer

***

### 📋 Media Grid List

**📱 Mobile Display**

* Select height: Small / Medium / Large
* Media items display via horizontal scroll on mobile

**💻 Desktop Display**

* Configure card spacing between grid items for optimal layout

***

### 🖼️ Image Content Tile

* Upload image with adjustable opacity
* Set tile width (1–6 columns) and height (1–2 rows)
* Customize content alignment: bottom center, left, right, etc.
* Mobile-specific image upload supported (recommended: **600 x 800px**)

✅ Supported content blocks include all major types: badges, buttons, titles, statistics, icons, and more

***

### 📹 Video Content Tile

* Upload video with adjustable opacity
* Same layout options as image tiles: width (1–6 cols), height (1–2 rows)
* Apply individual color scheme and alignment to each video tile

✅ Supports full range of embedded content components

***

### 💡 Usage Tips

* The visual size of each item adjusts dynamically based on column and row spans
* Use proportion-matched images or centrally focused visuals to prevent cropping
* Recommended video length: 10–15 seconds for performance and clarity
* Upload mobile-specific images to ensure a better mobile browsing experience (600x800px suggested)