> For the complete documentation index, see [llms.txt](https://docs.feathery.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.feathery.io/platform/build-forms/design/sizing-forms-and-elements.md). # Sizing Forms and Elements Flexibly size your elements and overall form using fixed and responsive units. Forms and elements on the forms can be sized using the following units. ### Fit Containers will resize automatically to fit any content placed inside, making automatic layouts a breeze. ### Fill Enables containers and groups to grow to fill the view, allowing for centered forms and more. ### Pixels (PX) Set the dimensions of a container or group to an exact numeric pixel value. {% hint style="info" %} If a form sized in pixels is greater than its screen, it will shrink to fit accordingly. {% endhint %} ### What dimensions should I use for my form? Use `Fit` if you plan to embed your form in a responsive container. Great for adding a form to a new page on your website. Use `Fill` if you want a stand alone full screen form. Perfect for sharing a link straight to the your form. Use exact `PX` if you plan to embed your form in a fixed scale container. Best for fitting a form on your website page that already has other content. ![](https://640450274-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHAVngDAEk3s8Bw7P6Ntz%2Fuploads%2FVW04KXyZXqiGvoUgyXct%2Fdocs_sizing-form.gif?alt=media\&token=d23dafc6-ad26-40d0-9c6f-f1dafd862592) ### What dimensions should I use for my containers and elements? Use `Fit` if you want the container to be responsive to your element and maintain an exact scale regardless of the screen size. Use `Fill` if you want the container to grow as wide as the screen size allows. Great for 100% scale elements on mobile. Use exact `PX` if you want a fixed container for your element. Great for 100% scale elements on desktop. {% hint style="info" %} Use multiple **`fill`** containers to create equal spacing. Percentage elements will take priority over fill elements. For equal spacing, place your **`100%`** element inside a **`fill`** container next to other fill containers. *Ex. 2 fill containers in a group = 50% each. 4 fill containers in a group = 25% each.* {% endhint %} ![](https://640450274-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHAVngDAEk3s8Bw7P6Ntz%2Fuploads%2Ffg4vivbIgeHU9IR6nbl2%2Fdocs_sizing-element.gif?alt=media\&token=349198af-bc56-4316-a253-2648c96d5385) ### Demo {% embed url="" %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.feathery.io/platform/build-forms/design/sizing-forms-and-elements.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.