Your complete guide to modifying template layouts. Learn to position elements precisely, adjust sizing and spacing, leverage grid and flexbox layouts, and create responsive compositions that work across all aspect ratios.
Learn the fundamental building blocks of template layouts and how they work together to create compelling compositions.
Remotion uses absolute positioning within a fixed canvas. The origin (0, 0) is at the top-left corner. All positions are measured in pixels from this point, with X increasing rightward and Y increasing downward.
Choose your canvas size based on your target platform and content type.
| Format | Dimensions | Aspect Ratio |
|---|---|---|
| 1080p Landscape | 1920 × 1080 | 16:9 |
| 1080p Portrait | 1080 × 1920 | 9:16 |
| Square | 1080 × 1080 | 1:1 |
| 4K Landscape | 3840 × 2160 | 16:9 |
Templates organize content in nested containers. The root container matches the canvas size, while child containers group related elements. Understanding this hierarchy is key to making effective modifications.
A flat layout with all elements at the same level makes it difficult to move groups of related content together or apply consistent styling.
Grouping related elements in containers (header, content, footer) enables you to move entire sections at once and apply consistent spacing within each group.
Most templates have three main layers: background (images, gradients), content (text, cards), and overlay (logos, watermarks). Each layer uses different positioning strategies.
Master precise element positioning with absolute coordinates, centering techniques, and edge alignment strategies.
Use position: 'absolute' with left, top, right, or bottom values to place elements at exact pixel coordinates. This gives you precise control over element placement.
An element positioned at the default location may not align with your design intent.
Adjust coordinates to place the element exactly where you need it in your composition.
Center elements using the transform technique: set left: '50%' and transform: 'translateX(-50%)' for horizontal centering. Add top: '50%' and translateY(-50%) for vertical centering.
Align elements to canvas edges using right and bottom instead of left and top. This anchors elements to the opposite edges, useful for logos and watermarks.
Place elements in corners with consistent padding from the edges.
Control stacking order with zIndex. Background elements use low values (0-10), content uses medium values (10-50), and overlays use high values (50+). This ensures elements appear in the correct order.
Keep important content within safe zones—typically 60px from all edges. This prevents cropping on different platforms and ensures text remains readable when UI elements overlay the video.
Control element dimensions and spacing to create balanced, visually appealing compositions with proper breathing room.
Set explicit width and height values in pixels for precise control. This is ideal for elements that should maintain exact sizes regardless of content.
An element at its default size may not fit your design requirements.
Increase dimensions to give content more visual prominence.
Use percentages for responsive sizing: width: '100%' fills the container width, width: '50%' takes half. This adapts to different canvas sizes automatically.
Maintain proportions when resizing with aspectRatio: '16 / 9'. Set one dimension and let the other calculate automatically. Essential for images and video containers.
Use a spacing scale for consistency: 8, 16, 24, 32, 48, 64, 96 pixels. Apply these values for padding, margins, and gaps. Consistent spacing creates visual rhythm and professionalism.
Apply spacing consistently across your layout for visual harmony.
Control how images fill their containers with objectFit: 'cover' fills the container (may crop), 'contain' fits entirely (may letterbox), 'fill' stretches to fit.
Limit text container width with maxWidth for better readability. Aim for 60-80 characters per line. For video, this typically means 600-900px depending on font size.
Leverage CSS Grid and Flexbox for flexible, powerful layouts that adapt to content and simplify complex arrangements.
Flexbox arranges items along a single axis. Use display: 'flex' with flexDirection: 'row' for horizontal layouts or 'column' for vertical. Add gap for consistent spacing.
Elements stack vertically by default, requiring manual positioning for horizontal layouts.
Flexbox creates a horizontal row with automatic spacing.
Control alignment with justifyContent (main axis) and alignItems (cross axis). Common values: 'flex-start', 'center', 'flex-end', 'space-between', 'space-around'.
Grid creates two-dimensional layouts. Use display: 'grid' with gridTemplateColumns to define columns. repeat(3, 1fr) creates three equal columns.
Create a responsive grid for card layouts or galleries.
Create sidebar layouts with mixed column sizes: gridTemplateColumns: '300px 1fr' creates a fixed sidebar with flexible main content.
Use flexbox for equal split-screen compositions.
Use Flexbox for one-dimensional layouts (navigation bars, card rows, centered content). Use Grid for two-dimensional layouts (galleries, dashboards, complex page structures).
Combine Grid and Flexbox for complex layouts. Use Grid for the overall page structure, then Flexbox within individual cells for content alignment.
Create layouts that adapt gracefully to different aspect ratios and canvas sizes for maximum flexibility.
Detect orientation by comparing width and height: const isPortrait = height > width. Use this to conditionally apply different layouts for landscape vs portrait compositions.
A layout designed for landscape may not work well when rendered in portrait orientation, with elements overlapping or extending beyond the canvas.
Conditional positioning adapts the layout based on aspect ratio.
Scale content proportionally with transform: scale(). Calculate scale factor: Math.min(width / 1920, height / 1080) to fit content designed for 1080p into any canvas size.
Different platforms have different UI overlays. Instagram/TikTok need larger top (120px) and bottom (180px) margins for usernames and captions. YouTube uses standard 60px margins.
Always preview your layout at different aspect ratios before finalizing. Create test compositions at 16:9, 9:16, and 1:1 to ensure your layout adapts correctly.
Scale text based on canvas dimensions for consistent visual weight.
Identify which elements should scale (backgrounds, containers) and which should remain fixed (logos, icons, minimum text sizes). This prevents tiny unreadable text or oversized UI elements.
Define layout breakpoints for major aspect ratio changes. Common patterns: stack vertically below 1:1, use sidebar above 4:3, full horizontal layout above 16:9.
Continue exploring with these related guides and tutorials.
Now that you understand layout principles, explore our template library to find templates with flexible layouts you can customize to your exact specifications.