Setting the size of a box
Select a box.
Select the [Box] tab in the right panel.
*If the panel is closed, open the right panel.
In the [Layout] menu, use the [Width] or [Height] input fields to set the box size.
When setting a size, use one of the following units.
Available units
| Unit | Overview | Use case |
1 | px | A unit for specifying a fixed size | Elements that should always display at a consistent size, such as logos and icons |
2 | % | A relative unit based on the size of the parent element (box or page) | Layouts where you want to maintain proportions, such as setting widths for multi-column layouts |
3 | auto | A unit that automatically adjusts size based on the content inside | Parent boxes where the amount of content varies |
4 | flex | A unit for specifying width ratios between sibling boxes arranged side by side | Layouts where you want to set widths by ratio, such as photo galleries or column layouts |
5 | vw | A unit based on the width of the browser viewport | Elements you want to display at full width, such as hero sections |
6 | vh | A unit based on the height of the browser viewport | Sections and other elements you want to display at full screen height |
7 | dvh | A unit based on the actual visible content area height | Full-screen modals, or buttons and banners fixed to the top or bottom of the screen |
After configuring sizes, check your layout using Live Preview. We recommend checking how it looks on browsers other than desktop as well.
For more on responsive design concepts, see the Responsive Design article.
Tip: Resize by dragging
You can also resize a box by selecting it on the screen and dragging a corner or edge. Hold the Shift key while dragging to maintain the aspect ratio.
Details on each size unit
1. px (pixels)
Pixels are a fixed-value unit. They're ideal for parts like icons and logos where you need an exact size.
Note: When width is set in px
A width set in px is not a strictly fixed value. The specified number acts as the maximum width — if the screen width becomes narrower, the box automatically shrinks to fit.
2. % (percent)
% (percent) is a relative unit based on the size of the parent element (box or page).
It scales proportionally as the parent box changes size, maintaining the ratio.
Use this when you want to evenly or proportionally distribute column widths — it makes responsive design much easier.
3. auto
This unit automatically adjusts the size based on the content inside. Because it adapts well to various layouts, we recommend setting the height of parent boxes to auto as a general rule.
Tip: You can also switch the unit to auto by double-clicking the border of a box.
4. flex
A unit for specifying width ratios between side-by-side boxes. It's used to distribute space among sibling boxes. Using flex lets you create complex layouts efficiently.
Example 1: When three side-by-side boxes are set to "1 flex : 1 flex : 1 flex"
Example 2: When three side-by-side boxes are set to "2 flex : 1 flex : 1 flex" (top row)
By changing these values per row, you can create a photo gallery with varying widths.
5. vw (viewport width)
A unit based on the browser's viewport width. Setting "100vw" makes the size automatically adjust in proportion to the browser width.
A value of 100 represents 100% of the screen width. To set something to half the viewport width, enter 50.
Accounting for scrollbars at the edge of the screen
The vw unit is not affected by the presence or absence of scrollbars. Because of this, differences in scrollbar behavior across environments can cause slight design inconsistencies.
For example:
・macOS: Scrollbars are hidden by default
・Windows: Scrollbars are always visible
If you want your design to look consistent regardless of scrollbars, we recommend using the % unit instead.
6. vh (viewport height)
A unit based on the browser's viewport height.
Setting "100vh" makes the element always fill the full viewport height, regardless of the parent box size or browser dimensions.
A value of 100 represents 100% of the screen height. To set something to half the viewport height, enter 50.
7. dvh (dynamic viewport height)
Specifies height based on the actual visible area. The height automatically adjusts when the URL bar on smartphones appears or disappears.
If you want to avoid dynamic height changes, use "vh" instead.
A value of 100 represents 100% of the screen height. To set something to half the viewport height, enter 50.
Difference from vh
| Reference | Characteristics |
vh | Full browser height | Height changes depending on whether the URL bar is shown or hidden |
dvh | Actual visible area height | Always matches the currently visible area |
width heights 幅 高さ 横幅 縦幅 unit フルスクリーン ファーストビュー ヒーロー