> For the complete documentation index, see [llms.txt](https://docs.eximee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/zmiana-szerokosci-komponentow.md).

# Changing component widths

* **Column grid:** Eximee Designer bases the form layout on a column grid. Each request page has a fixed number of columns (10 columns by default) intended for components. The number of form columns is set when the template is created, and each newly added page inherits this value.
* **Sections and column layout:** The Section component by default **inherits** the number of columns of the page, but it can be assigned **its own** number of columns. This means that if a page has, for example, 10 columns, the selected section can have, for example, 16 columns - inside such a section, components will be arranged in a finer grid, giving greater layout flexibility.
* **Component width:** Each component can occupy from one column to the full width (all columns) in its section/page. The width of a component (in columns) can be changed directly in the editor - in edit mode, grab the component by its right or left edge and drag to expand or narrow the element. During dragging, a green shadow appears showing the new size of the component and a number in the middle of the component indicating how many **columns** it will occupy after release. The current width of the component (in columns) is also visible in the properties of that component, in the **Styling**.
* **Layout flexibility:** The number of layout columns can be increased if needed - new columns will be added on the right side of the form. Decreasing the number of columns is also possible, however **before** lowering this value, first narrow the components on the page/section so that none of them occupies more columns than the new planned width. This keeps the layout consistent and components will not “fall out” beyond the new grid size.

### Examples

* **Expanding a component to more columns:** In edit mode, hover over the component, **grab** its right or left edge and **drag**, to increase its width. While dragging the component, you will see a green highlighted area indicating the new size and the number of columns the component will occupy. When you release the mouse button, the component will expand to the new width.
* **Two components in one row:** To place two components side by side in the same row, make sure the first one **does not take up the full width** of the page/section. Drag its edge, reducing the width so that free columns remain in the row. Then add (or move) the second component - if the total width of both elements does not exceed the total number of columns, **the second component will be placed next to the first one** in the same row. For example: for a 10-column layout, two components 5 columns wide each will together fill the entire row.
* **Setting a component to full width:** If you want a component to occupy the full width of a section or page, expand it to the **maximum number of columns**. This can be done by dragging the component edge to the end of the row (to the full width of the container) or by entering the target number of columns in the component properties (the **Number of columns** field *Styling*). A component set to full width will occupy all columns available in the given row.

### Frequently asked questions (FAQ)

* **How many columns does a standard page have?** By default, a newly created form (request) is divided into **10 columns** - this value can be changed when creating the template. If it is not changed, all request pages will use this default number of columns.
* **How does the section layout differ from the page layout?** **Page** has a globally set number of columns (shared for the entire page). **A section** is a container component inside a page - by default it inherits the number of columns from the page, but it can be assigned a different number of columns. In practice, this allows you to define an independent grid within a section (e.g. a section can have more columns than the page), which gives freedom in arranging elements within that section.
* **How do I set a custom column layout?** The number of page columns can be changed after the form is created by editing its definition. In request edit mode, go to the **Source** tab and find the definition of the given page, then change the attribute `numColumns` field `system:Page.layout` to the desired value (e.g. 12). In the case of **sections** changing the column layout is available directly in the Designer - in the properties of the Section component (section **Layout**) disable column inheritance and enter your own number of columns for that section. Increasing the number of columns is not a problem (new columns will be added on the right); when **decreasing** the number of columns, however, remember to first narrow the components in the given layout so that none exceeds the new smaller width.

{% hint style="info" %}
Remember that before decreasing the number of columns, you must first narrow the components. You can do this in the **Request** or in **Source** by setting the option **horizontalSpan** to a value equal to the number of columns or smaller.
{% endhint %}


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/zmiana-szerokosci-komponentow.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.