Build a skeleton that prevents layout shift
Reserve final card and media geometry so loading content does not move surrounding layout.Description
Requirements
Reserve stable card, text, and action space before loaded content is available.
Use matching box sizing, padding, border, and minimum dimensions for skeleton and loaded cards.
Reserve the same 16 / 9 media region in both states with aspect-ratio or equivalent intrinsic sizing.
Reflow the grid intentionally at narrow and wide viewports while keeping card dimensions predictable.
Allow grid tracks and card content to shrink or wrap without horizontal page overflow.
Disable skeleton animation under prefers-reduced-motion without removing placeholders.
Keep focus, loading, and loaded borders from changing the element's outer dimensions.
Loaded replacement
Replace one skeleton with a document card at 768px
The grid and neighboring cards keep their positions
Matching reserved block sizes prevent a loading-to-content shift.
Reduced motion
prefers-reduced-motion is reduce
Skeleton geometry remains but shimmer animation stops
Motion preference changes decoration, never reservation.
Constraints
Support 375, 768, and 1440 CSS-pixel viewportsDo not position skeletons absolutely over final contentUse CSS rather than runtime size measurement
Hints
Hint 1
Share the structural .document-card rule between .skeleton-card and .content-card.
Hint 2
Reserve media height from width with aspect-ratio instead of a viewport-specific fixed height.
Hint 3
Use transparent baseline borders and outline or box-shadow for non-shifting emphasis.