Arrange Elements

Open a View or component and edit its <style scoped> section. For example, this template and rule create a vertical menu:

<template>
  <div class="menu">
    <button>Play</button>
    <button>Settings</button>
  </div>
</template>

<style scoped>
.menu {
  display: flex;
  flex-direction: column;
  width: 320px;
  padding: 20px;
  gap: 12px;
}
</style>

Save and show it in Preview. The buttons should be stacked with space between them.

• width and height set size.
• padding adds space inside an element; margin adds space outside it.
• display: flex arranges children in a row or column. display: inline-flex does the same but keeps the element inline with surrounding text instead of taking a full line.
• position: relative provides a reference for absolutely positioned children.
• position: absolute places content using offsets such as top and right.

Use Flexbox for most menu layouts. Grid is not supported. The CSS reference lists accepted properties and values.