In Instant, you can control an element's width and height using five sizing options. Width and height are set separately, giving you full control over how each element behaves in your layout.
Overview
Sizing determines how elements occupy space within your layout. Choose the appropriate sizing method based on whether you need exact dimensions, proportional sizing, or responsive behavior.
Available Sizing Options
Option | Description |
Fixed | Exact pixel dimensions |
Relative | Percentage of container size |
Fit | Automatically matches content size |
Fill | Expands to use available space |
View | Based on viewport dimensions (vh/vw) |
Fixed Sizing
When you set an element's size to Fixed, you define its exact dimensions in pixels.
Behavior
Element maintains specified pixel dimensions
Size remains constant regardless of content changes
Size remains constant regardless of container changes
Example
Setting | Result |
Width: 200px | Element is exactly 200 pixels wide |
Height: 300px | Element is exactly 300 pixels tall |
When to Use
Icons and logos that need consistent sizing
Buttons with specific dimensions
Elements that must maintain exact proportions
Relative Sizing
With Relative sizing, an element's width or height is set as a percentage of its container's size.
Behavior
Size is calculated as a percentage of the parent container
Element scales proportionally when container resizes
Responsive by nature
Examples
Setting | Result |
Width: 50% | Element takes up half the container's width |
Height: 75% | Element uses three-quarters of the container's height |
Width: 100% | Element fills the full width of the container |
When to Use
Responsive layouts that scale with screen size
Multi-column layouts with proportional widths
Elements that should maintain relative proportions
Fit Sizing
When set to Fit, the element automatically adjusts its size to match the content and spacing inside it.
Behavior
Element shrinks or grows based on content
Includes any internal spacing in the calculation
No extra space beyond content and spacing
Example Calculation
Component | Size |
Image inside element | 200px wide |
Horizontal spacing (left) | 50px |
Horizontal spacing (right) | 50px |
Total element width | 300px |
Formula: Content + Spacing = Total Size
When to Use
Buttons that adapt to text length
Containers that wrap around their content
Dynamic content where size varies
Fill Sizing
Setting an element to Fill makes it expand to use all the available space in its container.
Behavior
Element expands to occupy remaining space
Multiple fill elements share space equally
Can be combined with other sizing types
Multiple Fill Elements
When multiple elements in the same container are set to Fill:
Scenario | Result |
2 fill elements | Each gets 50% of available space |
3 fill elements | Each gets 33.3% of available space |
1 fixed + 1 fill | Fill element takes remaining space after fixed element |
When to Use
Main content areas that should expand
Flexible layouts with dynamic spacing
Elements that should grow to fill gaps
Viewport-Based Sizing (vh / vw)
Use Viewport Height (vh) and Viewport Width (vw) to size elements based on the browser window dimensions.
Behavior
Size is relative to the viewport, not the container
1 view = 1% of the viewport width or height
Element size changes when browser window resizes
Examples
Setting | Result |
Height: 100 view | Element fills the entire viewport height |
Width: 50 view | Element spans half the viewport width |
Height: 50 view | Element is half the viewport height |
When to Use
Full-screen hero sections
Landing page banners
Elements that should scale with screen size regardless of container
Handling Overflow
Sometimes content may be too large for its container. Control this behavior with the Overflow setting.
Overflow Options
Option | Behavior |
Show | Overflowing content remains visible outside container boundaries |
Hide | Only content within container boundaries is shown; overflow is clipped |
Scroll | A scrollbar appears if content exceeds container size |
Wrap and Overflow
Tip: If Wrap is enabled in the Layout section, scrollbars only appear in one direction. Wrap prevents overflow in the main layout direction by moving elements to the next line.
Quick Reference
Task | Location |
Set width | Right sidebar → Size → Width |
Set height | Right sidebar → Size → Height |
Choose sizing type | Width/Height dropdown → Select option |
Set overflow behavior | Right sidebar → Size → Overflow |
Sizing Comparison
Feature | Fixed | Relative | Fit | Fill | View |
Exact dimensions | ✓ | ✗ | ✗ | ✗ | ✗ |
Scales with container | ✗ | ✓ | ✗ | ✓ | ✗ |
Scales with content | ✗ | ✗ | ✓ | ✗ | ✗ |
Scales with viewport | ✗ | ✗ | ✗ | ✗ | ✓ |
Responsive by default | ✗ | ✓ | ✓ | ✓ | ✓ |
Common Combinations
Use Case | Width | Height |
Full-width section | Fill or 100% | Fit |
Hero banner | Fill | 100 view |
Fixed-size thumbnail | Fixed | Fixed |
Responsive column | Relative (%) | Fit |
Sidebar | Fixed | Fill |