> 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/fr/apps/components/layout/grid-layout.md).

# Disposition en grille

## Grid Layout

Le composant Grid Layout est utile pour définir des mises en page de manière visuelle. Vous pouvez glisser-déposer des composants via l'interface web pour définir automatiquement la mise en page en JSON.

![](/files/gk3wjDBDt8KmFFxPT5w2)

## Concevoir des mises en page

Vous pouvez utiliser le paramètre `-Design` pour configurer la mise en page de votre page. Cela permet le glisser-déposer dynamique des composants que vous placez dans le contenu de la mise en page en grille. Au fur et à mesure que vous faites glisser et redimensionnez les composants, la mise en page est copiée dans votre presse-papiers. Remarque : tous les composants doivent posséder un `-Id` statique.

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

## Utiliser des mises en page

Une fois que vous avez configuré la mise en page selon vos besoins, vous pouvez coller le JSON dans votre script et l'assigner avec le paramètre `-Layout`. Supprimez le paramètre `-Design` pour verrouiller les éléments en place.

```
$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
```

## Permettre aux utilisateurs de modifier les mises en page

Vous pouvez permettre à vos utilisateurs de modifier dynamiquement les mises en page en utilisant les paramètres `-Draggable`, `-Resizable` et `-Persist`. Les modifications de mise en page sont stockées localement, de sorte que la prochaine fois que chaque utilisateur visite une page, elle sera chargée avec la mise en page qu'il a choisie.

```
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:

```
GET https://docs.devolutions.net/powershell-universal/fr/apps/components/layout/grid-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.