screenroveGrid layout UI design for your own files: the one-card problem
Grid layout UI design for personal file libraries: 15 of 39 file grids we captured held one card. How Runway, Recraft, Glasp and Prezi use the next slot.
Fifteen of the 39 "your files and projects" grids we captured held exactly one card. That is the first thing a new user sees in Bolt, Lovable, Lucidchart, Maze, Mural, Plane and VEED, and it is the weakest screen on our wall: personal file grids averaged 2.1 out of 5 on our reference score, against 3.7 for the polished template galleries the same products ship. If you work on grid layout UI design for a SaaS dashboard, the hard case is not the gallery with hundreds of items. It is the grid with one.
This piece looks only at the user's own grid: projects, files, drafts, collections. We compare it with template galleries on the catalogs and galleries wall, then look at what the better products put in the slots a new account cannot fill yet.
Two kinds of grid, scored very differently
The wall has 39 screens tagged your files & projects from 25 products, and 41 tagged templates from 29 products. They often sit one click apart in the same app, and they look like different disciplines.
| Your files & projects | Templates | |
|---|---|---|
| Screens | 39 | 41 |
| Average reference score (1–5) | 2.1 | 3.7 |
| Scored 4 or 5 | 2 | 26 |
| Scored 1 | 14 | 0 |
| Grid wide enough to count columns | 18 | 41 |
| Most common column count | 4 (10 of 18) | 3 (21 of 41) |
| Category navigation | 16 | 35 |
| Featured row | 0 | 5 |
Two numbers explain most of the gap. First, on 21 of the 39 file screens there were too few cards to count columns at all. A template gallery is filled by the vendor; a file grid is filled by the user, and our research accounts, like every new signup, had made one or two things. Second, none of the 39 file grids had a featured row, while 5 of the template galleries did. Vendors curate what they own and leave the user's space plain.
When file grids do fill up they run denser than galleries: 15 of the 18 countable ones used four or five columns, where templates settle on three. The two file screens that scored 4 both hold real volume and add a signal to every card. Ideogram's library mosaic keeps each image's ratio in a four-column masonry with a PNG badge per tile. OpusClip's clips grid leads every 9:16 clip with a lime virality score (99, 89, 86, 84, 82).
The one-card grid
The 15 single-card screens come from 12 products: Bolt (three times), Mural (twice), Cloudinary, Glasp, Kapwing, Lovable, Lucidchart, Maze, Plane, StackBlitz, ToolJet and VEED. Most wrap a full page of chrome (search, sort, filters, view toggles) around a single tile pinned to the top left.
Three things make it worse than it needs to be. Thumbnails are missing: Bolt's project has a placeholder letter, as do two of the five decks in Gamma's grid. Tools are oversized for the content: Bolt's Recently viewed and Starred pages are separate views of the same single project, and Mural's Murals page shows the same card twice, under "Recently opened murals" and "Recently modified murals in your workspace". And seeded content announces itself: Maze and Plane each greet a new account with one card named "Demo project" or "Demo Project".
What the next slot does
The more interesting screens treat the empty space after the first card as a slot to design. We found four uses for it.
Sell the next project
Runway puts the paywall exactly where the user would put their next project. Maze does the same job in the header with "1 active project remaining on your Free plan", and Mermaid Chart runs a dark banner above its file cards, "Start your free trial for unlimited editable diagrams", with "3 of 3 personal" beside a full orange meter. Runway's version is the only one that takes a slot in the grid itself, so the limit is visible as missing space rather than as a number.
Start the next project
Recraft spends the first slot, not the last, on creation. OpusClip spends two: a dashed "Add new collection" tile opens the Collections row and a dashed "Upload new video" tile opens the Projects row.
Fill it with samples
Seeded samples make the grid look alive and show what a finished item looks like, which is what Maze and Plane attempt with one card. OpusClip commits harder, with three real-looking projects, and keeps the count honest by leaving them out of the tab total.
Empty states that turn into catalogs
The fourth move skips the user's grid entirely and fills the page with the vendor's catalog. These screens were tagged as apps, community or templates rather than files, because by the time the page renders the catalog is the main content.
Glasp answers "you have nothing" with "here is where your things already are". Each card names one source and one action ("Import highlights from Kindle"), so the empty state is the onboarding.
Prezi backfills the empty collection with other people's work. The idea is sound; the dates on the cards ("Added Sep 27, 2013") show the risk of a recommendation pool nobody prunes.
Runway's Workflows page is the cleanest version. The empty state is kept small and honest, and the featured row underneath is one of only five featured rows among the 41 template screens (see all five). CodeSandbox does a lighter version on its "Sandboxes shared with me" page: "There are currently no sandboxes shared with you." above a single "Get feedback in context" tile.
What to steal
- Design the one-card state as its own layout. Fifteen of 39 file grids looked like this on first visit. Check yours with one item, not twelve.
- Give the next slot a job. Create (Recraft, OpusClip), upgrade (Runway) or sample (OpusClip). An empty cell next to a lone card does nothing.
- Size system tiles like real cards. Runway's upsell and Recraft's create tile match project cards exactly, so the grid stays a grid.
- Never ship a placeholder thumbnail if you can render one. Bolt's grey "b" and Gamma's grey "G" were the least informative cards we saw.
- Let an empty page borrow from the catalog, with the empty message kept to a line or a small panel, as Runway, Prezi and Glasp do. Then curate what you borrow.
- Add one signal per card once the grid fills. The only file grids to score 4 carried a format badge (Ideogram) or a score (OpusClip).
How we counted
We captured these screens in desktop browsers with research accounts between September and October 2026. The accounts were new, so most file grids show the first-visit state, not a mature workspace. A vision model recorded each screen's attributes (what it lists, card style, columns, category navigation, search, featured row) and a 1–5 reference score, and you can check them on each screen's page; the single-card count is ours, from opening each file screen. We record what we saw, not A/B test results, so none of this says which pattern converts better.
To find more of these, browse every file grid on the wall, or connect the Screenrove MCP server and ask your agent for "empty project grids with an upgrade card" before you build yours.