The grid decision that rewrote my lightbox logic

The moment the grid stopped being “just layout”

The /themes page for Aftertype started as a simple responsive gallery. A few cards, some screenshots, a lightbox on click.

Then I tried to make it more flexible. Different aspect ratios. Mixed font previews. Variable image crops. A lightbox that behaved slightly differently per theme. It technically worked, but it felt like a prototype that never ended.

The turning point was a very boring decision: lock the grid to consistent aspect ratios for both fonts and images, across all breakpoints. No more “this card is special.” Once that was in place, a lot of other logic had to be rewritten, especially the lightbox. It also made the page better at doing the one thing it needs to do: sell design themes.

Aspect ratio as a product decision, not a CSS trick

Aspect ratio sounds like a visual detail, but on a product gallery it decides what people can actually compare. If one theme preview is a wide hero and another is a tall stack of UI, you are asking people to mentally normalize them before they can judge anything.

Locking aspect ratios for both font previews and image previews did three things at once:

• Every card became visually comparable. You can scan down the grid and your eyes are not constantly re-adjusting to new shapes.
• The grid stopped jumping. No more rows with one tall card that stretches everything else or leaves awkward gaps.
• The lightbox got simpler. The content going into it became predictable, so the logic stopped trying to guess what it was showing.

The trade-off is obvious: you lose some flexibility in how you showcase each theme. Some designs naturally want a tall crop, others want a wide one. But when you are selling a catalog of themes rather than one hero project, consistency is part of the product.

How the grid forced the lightbox to grow up

Before the grid change, the lightbox logic was a patchwork of special cases. Some previews were mostly typography, some were dense UI screenshots, some wanted zoom, some did not. The lightbox tried to be clever about each one.

Once the grid was locked into consistent aspect ratios, that cleverness became unnecessary and also a problem. The lightbox had to treat every item as the same type of component:

I wrote about this earlier in Scroll-snap in 2026: when it works and when it fights the user.

• Same base aspect ratio coming in
• Same spacing rules around the content
• Same approach to captions and descriptions
• Same interaction pattern on both desktop and mobile

That meant rewriting interaction states instead of tweaking them:

• Hover vs focus vs tap: no more “this theme has a custom hover.” Cards now have one predictable hover and focus pattern, and the lightbox trigger is always the same element.
• Open and close animations: standardized timing and easing, instead of per-theme flourishes that made the gallery feel inconsistent.
• Keyboard and touch parity: the same structure supports keyboard navigation, pointer devices, and touch, because the lightbox is built around one consistent card model.

This was not an accessibility pass bolted on at the end. It was a side effect of refusing to let each theme preview behave like its own mini-website.

Mobile touch targets and the cost of extra options

On desktop, you can sometimes get away with tiny hit areas and multiple micro-actions on a single card. On mobile, that turns into missed taps and accidental lightbox openings.

Once the grid was consistent, it became obvious how crowded some cards had become. Each one wanted:

• A main tap area to open the lightbox
• A secondary tap to go directly to a theme detail page
• Some kind of quick info or tag interaction

On a small screen, that is three different targets inside a rectangle that already has to respect margins, aspect ratio, and readable text.

Locking the grid pushed a different kind of simplification: fewer actions per card, but larger and clearer targets. The lightbox became the primary interaction, and everything else had to justify its existence. If an action was not essential to choosing a theme, it probably did not belong on the card.

This is where consistency beats flexibility in a very literal way. A flexible card that can host five different optional buttons is nice in theory. A consistent card with one obvious tap target is better when someone is scrolling with a thumb.

More on this in my article A CSS Hover-Reveal Pattern for Technical Specs.

Breakpoints: fewer, more opinionated steps

With mixed aspect ratios, breakpoint logic tends to multiply. One layout for wide cards, another for tall ones, special exceptions at specific widths where a certain combination breaks the grid.

Once every item had a predictable shape, the breakpoint strategy could be reduced to a handful of opinionated steps:

• Small screens: a single column where each theme gets the full width and comfortable tap targets.
• Medium screens: two columns with consistent gutters and line lengths that still work for descriptions.
• Larger screens: more columns, but the same card proportions, just scaled.

The important part is not the exact numbers, but the idea that the grid does not change its personality at each breakpoint. It just gains or loses columns while keeping the same card proportions and behavior. That stability is what made the lightbox logic straightforward: the trigger is always in the same place, in the same relationship to the rest of the content.

The component mindset for product galleries

The /themes page stopped behaving like a custom layout and started behaving like a set of components:

• A theme card with a locked aspect ratio, clear hierarchy, and a primary action.
• A lightbox that always receives the same kind of content in the same structure.
• A grid wrapper that only cares about columns and gaps, not about individual card quirks.

Once those pieces were treated as components instead of one-off designs, a few things became easier:

• Adding a new theme does not require layout tweaks.
• Changing typography or spacing is a small, centralized decision.
• Accessibility improvements apply everywhere instead of in isolated pockets.

The trade-off is creative control on a per-theme basis. You cannot redesign a single card to be wildly different without breaking the system. For a portfolio, that might be a problem. For a theme catalog, it is a feature. People are there to compare, not to re-learn the interface for each item.

Read also ABM landing pages for maritime cybersecurity.

Consistency as a sales tool

On a page that sells design themes, the product is not just the visuals. The product is also how easy it is to understand what you are looking at, how it behaves, and how it compares to the next option.

Locking aspect ratios, simplifying lightbox logic, and cutting down breakpoint complexity are all small, unglamorous decisions. Together they make the gallery feel trustworthy. Each theme gets the same stage, the same rules, and the same interaction pattern.

Flexibility is still there where it matters: inside the themes themselves. On the /themes page, consistency wins.