### This plugin allows you to create some grids with customizable columns and rows count in which you can then draw areas in which to put media (image or video)

[

**This is a Community Plugin!** Learn how create your own plugin, or copy and remix existing ones in our documentation

](https://www.datocms.com/docs/plugin-sdk/introduction.md)

## DatoCMS Plugin Buzz Media Grid

This plugin allows you to create some grids with customizable columns and rows count in which you can then draw areas in which to put media (image or video).

-   [DatoCMS Plugin Buzz Media Grid](https://www.datocms.com/marketplace/plugins/i/@buzzbrothers/datocms-plugin-buzz-media-grid.md#datocms-plugin-buzz-media-grid)
    -   [Features](https://www.datocms.com/marketplace/plugins/i/@buzzbrothers/datocms-plugin-buzz-media-grid.md#features)
    -   [Usage](https://www.datocms.com/marketplace/plugins/i/@buzzbrothers/datocms-plugin-buzz-media-grid.md#usage)
    -   [JSON output](https://www.datocms.com/marketplace/plugins/i/@buzzbrothers/datocms-plugin-buzz-media-grid.md#json-output)

(Image content)

## Features

1.  **Customizable** grid size
    1.  At **plugin config** level
    2.  At **field config** level
    3.  At **user** level (optional)
2.  Easy area selection (**click & drag**)
3.  **Multiple custom layouts** support (desktop, mobile, etc...)
4.  Support focal point (at time of choosing media not updated after that)
5.  Integrated with **Dato media selector**
6.  Move and resize areas
7.  Delete content/area by clicking on it with the `meta` key pressed
8.  Dynamic rows count depending on areas sizes and placement

## Usage

To create a media grid, simply follow these steps:

1.  Add a `JSON` field
2.  Under `Presentation`, choose `Media grid`
3.  Update the columns and rows count if wanted
4.  Click on `Save field`

(Image content)

## JSON output

The output of this plugin is a simple JSON that is structured like so:

```json
{  "columns": 6, // count of columns  "rows": 6, // count of rows  "areas": [    {      // a UUID for your area      "id": "573921d1-974b-4ecb-bbfb-dc7e9fad9add",      // {startColumn}, {startRow}, {endColumn}, {endRow}      "position": [0, 0, 2, 3],      // content (image or video) with url      "content": {        "type": "image",        "url": "https://..."      }    },    {      // etc...    }  ]}
```