## Spec for "grid component" Plugin...

A configurable grid component widget that can be added to any web page

## Table of Contents​

- [Spec for "grid component" Plugin...](#spec-for-%22grid-component%22-plugin)
- [Table of Contents​](#table-of-contents%e2%80%8b)
- [Workflow](#workflow)
- [User Stories](#user-stories)
- [Screens / States​](#screens--states%e2%80%8b)
- [Sections Used](#sections-used)
- [Test Plan](#test-plan)

## Workflow

(N/A)​

## User Stories

As a user, I can...

- Add page objects into a container with multiple columns and rows
- Select from a collection of grid layout presets
  [?] autoplacement on drop
- Align the grid
- Set # of columns
- Set # of rows
- Set gap size (1-10)
- Resize row/column size distribution (drag/drop, # of pixels, auto-fit)
- Set min/max size
- Grid Item cells can accept content
- Ability to merge cells
- Re-order child cells
- Clear child grid settings
- Set mobile responsive breakpoints
- Auto-fit for mobile responsiveness

## Screens / States​

![]()

## Sections Used

Alignment
Presets
Mobile Toggle
Row/Column Count Builder & Gap Size
Border/Shadow
Position/Padding/Spacing

## Test Plan

| √   | Scenario                                               | Expected                                                          |
| --- | ------------------------------------------------------ | ----------------------------------------------------------------- |
| √   | When a user opens the [add new] tab                    | A [Grid Widget] appears                                           |
| √   | When a user drags the Grid Widget to the canvas        | A simple grid component appears                                   |
| √   | When a user clicks the [*] button on the widget        | The grid component properties box appears                         |
| √   | When a user changes the layout (align, position)       | Grid settings adjust accordingly (both editor & live mode)        |
| √   | When a user configures the design (bg, border, shadow) | Grid settings adjust accordingly (both editor & live mode)        |
| √   | When a user publishes a page with the grid             | The destination page shows the grid as specified on the live page |
| x   | When a user chooses a preset                           | Grid settings overwrite to the preset settings                    |