Creating and editing a grid
Behavior from source: Insert a default three-column grid at the cursor, populate cells, add/delete columns, or create a grid from selected images, documents or videos.
Original source · exact version bafyreicfomcr7f3bbkhfgvfedfdaofxzqgnauha6unhndm4e2ixcl4cnfi
Reviewed migration decision · Journey map · local task ID ut-35f742b46c69c8b5.
Confidence: high; review status: needs-review. Similar source records are not merged. Source status icon is not a committed release or current product state.
Source acceptance and behavior
When user clicks "+", the block menu shows "Grid" under the Layout section
Selecting "Grid" inserts a 3 column grid by default with empty cells
Each empty cell displays a "+" icon indicating content can be added
The grid is inserted at the cursor position within the document
Clicking "+" inside a grid cell opens the same block menu (Image, Video, Web Embed, File, Grid, Button)
Selecting "Image" inserts and displays the image within that specific cell
Other cells remain empty with their "+" icons until filled
User can select and delete an individual grid column
Remaining columns reflow to fill the available width
User can add a new column to an existing grid
The new column appears with an empty "+" state
Existing content in other columns is preserved
User can select 2 or more images, documents or videos and create a grid from it
User can selects the elements and the list of grid options will appear
Full original readable source and block backlinks
Heading As a user, I want to insert a grid layout into my document and manage its columns, so that I can organize content (images, embeds, files) in a structured multi-column format quickly and without confusion. source block
Heading Design source block
Paragraph Selecting images and converting to grid source block
Paragraph Inserting a grid source block
Heading Acceptance criteria source block
Paragraph 1. Insert Grid source block
Paragraph When user clicks "+", the block menu shows "Grid" under the Layout section source block
Paragraph Selecting "Grid" inserts a 3 column grid by default with empty cells source block
Paragraph Each empty cell displays a "+" icon indicating content can be added source block
Paragraph The grid is inserted at the cursor position within the document source block
Paragraph 2. Add content to grid cells source block
Paragraph Clicking "+" inside a grid cell opens the same block menu (Image, Video, Web Embed, File, Grid, Button) source block
Paragraph Selecting "Image" inserts and displays the image within that specific cell source block
Paragraph Other cells remain empty with their "+" icons until filled source block
Paragraph 3. Delete a grid column source block
Paragraph User can select and delete an individual grid column source block
Paragraph Remaining columns reflow to fill the available width source block
Paragraph 4. Add a grid column source block
Paragraph User can add a new column to an existing grid source block
Paragraph The new column appears with an empty "+" state source block
Paragraph Existing content in other columns is preserved source block
Paragraph 5. Create grid from selection source block
Paragraph User can select 2 or more images, documents or videos and create a grid from it source block
Paragraph User can selects the elements and the list of grid options will appear source block
Do you like what you are reading? Subscribe to receive updates.
Unsubscribe anytime