> For the complete documentation index, see [llms.txt](https://docs.devolutions.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devolutions.net/powershell-universal/de/apps/components/layout/grid-layout.md).

# Grid Layout

## Grid Layout

Die Komponente Grid Layout ist nützlich, um Layouts auf visuelle Weise zu definieren. Sie können Komponenten über die Weboberfläche per Drag-and-Drop verschieben, um das Layout automatisch als JSON zu definieren.

![](/files/fQXbL4Tbbrn9TJddGRoW)

## Layouts entwerfen

Sie können den Parameter -Design verwenden, um das Layout Ihrer Seite zu konfigurieren. Dies ermöglicht das dynamische Verschieben von Komponenten per Drag-and-Drop, die Sie innerhalb des Inhalts des Grid Layouts platzieren. Während Sie Komponenten verschieben und in der Größe ändern, wird das Layout in Ihre Zwischenablage kopiert. Hinweis: Alle Komponenten müssen eine statische -Id besitzen

```
New-UDGridLayout -Content { 1..10 | ForEach-Object { New-UDPaper -Id "Paper$" -Content { New-UDTypography -Text $ } -Elevation 5 } } -Design
```

## Layouts verwenden

Sobald Sie das Layout nach Ihren Bedürfnissen konfiguriert haben, können Sie das JSON in Ihr Skript einfügen und es mit dem Parameter -Layout zuweisen. Entfernen Sie den Parameter -Design, um Elemente an ihrer Position zu fixieren.

```
$Layout = '{"lg":[{"w":7,"h":7,"x":5,"y":0,"i":"grid-element-Paper1","moved":false,"static":false},{"w":7,"h":5,"x":5,"y":7,"i":"grid-element-Paper2","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":0,"i":"grid-element-Paper3","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":1,"i":"grid-element-Paper4","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":2,"i":"grid-element-Paper5","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":3,"i":"grid-element-Paper6","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":4,"i":"grid-element-Paper7","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":5,"i":"grid-element-Paper8","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":6,"i":"grid-element-Paper9","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":7,"i":"grid-element-Paper10","moved":false,"static":false}]}' 
New-UDGridLayout -Content { 1..10 | ForEach-Object { New-UDPaper -Id "Paper$" -Content { New-UDTypography -Text $ } -Elevation 5 } } -Layout $Layout
```

## Benutzern das Ändern von Layouts erlauben

Sie können Ihren Benutzern erlauben, Layouts dynamisch zu ändern, indem Sie die Parameter -Draggable, -Resizable und -Persist verwenden. Die Layoutänderungen werden lokal gespeichert, sodass beim nächsten Besuch einer Seite durch den jeweiligen Benutzer das von ihm gewählte Layout geladen wird.

```
New-UDGridLayout -Content { 1..10 | ForEach-Object { New-UDPaper -Id "Paper$" -Content { New-UDTypography -Text $ } -Elevation 5 } } -Draggable -Resizable -Persist
```


---

# 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.devolutions.net/powershell-universal/de/apps/components/layout/grid-layout.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.