Instagram Grid Planner

A profile grid is seen before any individual post. Someone arrives from a Reel, taps through to your profile, and takes in nine thumbnails at once - which means the relationship between adjacent images does work that no single caption can. Planning that relationship in advance is the difference between a feed that looks composed and one that looks accumulated.

This planner is a three-by-three board you fill by clicking tiles and choosing images. Each tile crops to a square, the board updates immediately, and a counter tracks how many of the nine slots are filled. Everything happens on your device - the images are read into the page and never sent anywhere.

It is a visual scratchpad rather than a scheduler. There is no queue, no publishing, and no memory between sessions, which is worth knowing before you spend twenty minutes arranging tiles.

The patterns that work are mostly about controlled repetition. Alternating a photo with a text card produces a checkerboard that stays legible as you scroll. Grouping by tone - three warm images, three cool, three neutral - creates visible bands. Leaving one deliberately empty-looking tile per row gives the grid breathing room. All of these are decisions you can only evaluate by seeing nine thumbnails together, which is what the board is for.

The failure mode is subtler than clashing colours. It is nine images that are individually good and collectively repetitive: the same subject at the same distance in the same light, nine times. On a grid that reads as one texture, and a visitor learns nothing about the range of what you post. Variety of framing matters more than variety of subject.

Watch the diagonals as well as the rows. Because the grid is three wide, two strong high-contrast images placed diagonally adjacent pull the eye across the board and unbalance it, while the same two images in the same row read as a pair. Moving one tile is often the whole fix.

A grid is a queue seen backwards. The post you publish next lands top-left, pushes everything one place right, and shifts the bottom row off the visible nine. So an arrangement you design today only exists on the profile for as long as it takes to publish one more post - after which the whole board slides and the composition you balanced is a row out of alignment.

The way to plan around this is to design in rows rather than in boards. A row of three publishes as a unit, keeps its internal balance as it moves down the grid, and does not depend on what sits above or below it. Feeds built from row-sized decisions survive the constant sliding; feeds built as a single nine-tile mural break the moment you post again.

In this planner, top-left is the newest slot and bottom-right the oldest, which means the publishing order is right to left along the bottom row and upward. If you are planning a sequence, load it in reverse - the last thing you intend to post goes top-left.

Each of the nine tiles owns a hidden file input. Clicking a tile opens the picker, the chosen file is checked to confirm it is an image, and it is then read with the browser’s file reader into a data URL held in the page’s state. That data URL is what the tile displays, so no copy of the file is written to disk or transmitted over the network.

Display is a square container with the image set to cover it, which means each picture is scaled up until it fills the tile and the overflow is cropped equally from the sides or the top and bottom. That mirrors how Instagram thumbnails a non-square image in the grid, so a portrait photo will show you here roughly the same centre crop it will show there.

Hovering a filled tile reveals two controls: a small cross that clears the slot, and a full-tile overlay that reopens the picker to replace the image. A clear-all button resets the whole board. Because the tiles are held in page state, a refresh empties the board completely - there is no autosave.