Social cards in 1:1, 16:9, and 9:16 from one template

A campaign that ships to Instagram, TikTok, YouTube, LinkedIn, and X needs five aspect ratios from the same content. Most teams handle this with five After Effects files that get out of sync as the brand evolves. There is a faster path: one HTML template that responds to its container, three render passes.

The three aspects that cover most

The math: five common ratios collapse to three layout modes.

• 16:9 (YouTube, LinkedIn, X video) — wide hero, side-by-side type and visual.
• 1:1 (Instagram feed, X image) — stacked, type-heavy, central focus.
• 9:16 (Reels, TikTok, Stories) — vertical, large text, motion in the upper third.

Get these three right and you cover 95% of distribution.

Container queries do the work

The CSS feature that makes this possible: @container. Rather than checking the viewport, you check the element's size. The template wraps everything in a container; the children's layout responds to whatever aspect ratio that container has.

.frame { container-type: size; container-name: frame; }

@container frame (aspect-ratio > 16/10) {
  .stage { grid-template-columns: 1fr 1fr; }
  .type { font-size: 64px; text-align: left; }
}

@container frame (aspect-ratio < 1.1) and (aspect-ratio > .9) {
  .stage { grid-template-columns: 1fr; }
  .type { font-size: 72px; text-align: center; }
}

@container frame (aspect-ratio < 9/10) {
  .stage { grid-template-rows: 1fr 1fr; }
  .type { font-size: 84px; text-align: center; }
}

Three media queries, three layouts. The renderer sizes the container per output; the layout follows.

The shared content

What stays the same across aspects:

• Headline copy
• Brand mark
• Color palette
• Animation timing

What changes:

• Grid direction (column vs row)
• Type scale
• Element ordering (logo above the headline on 9:16, beside it on 16:9)

If you find yourself changing the content between aspects, you have two templates, not one. Stop and rethink.

A concrete example

The same campaign card, rendered three ways:

Render specs per platform

The dimensions that matter, by platform:

Pin these in your render configuration. A render at the wrong dimensions gets re-encoded by the platform, which means quality loss on top of the size loss.

The render matrix

In CI, the matrix is one row per (template, aspect) pair:

strategy:
  matrix:
    aspect: [1:1, 16:9, 9:16]
steps:
  - run: pnpm render --template campaign.html --aspect ${{ matrix.aspect }} --out out/${{ matrix.aspect }}.mp4

Three renders, three minutes total on a decent runner. Outputs upload to S3; the publishing tool picks the right MP4 for the right platform. See the GitHub Actions integration for the full workflow.

The brand-time benefit

The reason this is worth the upfront work: when the brand evolves, you fix one template. The next campaign ships in the new style across every aspect ratio simultaneously. No "we forgot to update the TikTok cut" Slack message. No "the YouTube version still has the old logo" thread.

For marketing teams shipping weekly, this compounds fast. The first month of one-template-many-aspects feels marginal. The third month, you stop noticing that the social cuts even need to be made. They are build artifacts.

The pattern lives outside of social, too — emails, landing pages, out-of-home — every surface gets a render at its native dimensions. Same source, many outputs. The static-site-generator playbook, for video.