---
sourceDocument: Criar ou modificar aplicações do Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/xanadu/application-development

 Release :

    - xanadu

ft:locale :

    - pt-BR

ft:publication_title :

    - Criar ou modificar aplicações do Xanadu

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Creator


---

# Organizar componentes nas páginas do Construtor de IU

# Organizar componentes nas páginas do Construtor de IU {#ariaid-title1}

* Versão de lançamento: Xanadu
* 
* Atualizado 1 de ago. de 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 min. de leitura

Os layouts de coluna organizam os componentes em uma página Construtor de IU. Saiba como os layouts de coluna são usados em Construtor de IU.

Os layouts de coluna permitem criar páginas úteis e visualmente atraentes em uma experiência. Um layout de coluna é um tipo de contêiner flexível que pode conter componentes. Os layouts de coluna podem ter colunas de larguras iguais ou diferentes. Você pode configurar o layout de coluna como um todo e as colunas individuais dentro do layout. Por exemplo, defina uma largura e cor de borda diferentes para um layout de coluna e para as colunas individuais no layout. Os layouts de coluna podem conter colunas vazias em uma página Construtor de IU para criar um espaço em branco. Use layouts de várias colunas em uma página. Por exemplo, um layout de duas colunas pode conter um cabeçalho e uma imagem, e um layout de três colunas abaixo dele pode conter mais componentes, como uma lista e um formulário.

Pense no layout da sua página antes de começar a criá-la. Analise o que você deseja alcançar e a complexidade do layout da página. Essas perguntas determinam que tipo de layout ou layouts de coluna você deve usar.

Os layouts de coluna em Construtor de IU usam regras de Folhas de Estilo em Cascata (CSS) baseadas em padrões e tecnologias de layout da Web, como Flexbox, grade de CSS e posicionamento absoluto. Portanto, tudo o que você pode fazer em CSS, pode fazer aqui. Visite a [Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS) para saber mais sobre CSS.  
Nota:  
Se você tiver páginas Construtor de IU criadas em uma versão anterior (Utah ou Tokyo), poderá fazer upgrade para Vancouver ou Washington DC e adicionar layouts de coluna às páginas.
* **[Layouts de coluna](https://servicenow-prod.fluidtopics.net/3omZyAviJAKMbB1NaMnMwg#column-layout)**   
  Layouts de coluna são usados para projetar e organizar Construtor de IU páginas.
* **[Como fazer upgrade de layouts no Construtor de IU](https://servicenow-prod.fluidtopics.net/nhXJIw5QNeXMbVhNKME_WA#upgrade-layout-uib)**   
  Faça upgrade de layouts criados em Quebec e Rome para o novo sistema de layout.
* **[Como usar layouts Flexbox no Construtor de IU](https://servicenow-prod.fluidtopics.net/oG~8pHQ59UH9_e_htsQANw#flexbox-uib)**   
  Crie um layout Flexbox em Construtor de IU para criar páginas poderosas para que você possa personalizar com folhas de estilo em cascata (CSS) e melhorar seu desempenho.
* **[Como usar layouts de grade de CSS para criar uma página](https://servicenow-prod.fluidtopics.net/whfkxQjXSb1qwWBVX4eolg#css-grid-uib)**   
  Crie um layout de grade de CSS em Construtor de IU para criar páginas poderosas para que você possa personalizar com folhas de estilo em cascata (CSS) e melhorar seu desempenho.
* **[Alterar o layout de uma página criada em Quebec ou Rome](https://servicenow-prod.fluidtopics.net/4oojaeHZKb3il92V_8~LVg)**   
  Adicione e modifique o design do layout para mudar a aparência da página. Escolha como os componentes são exibidos em uma página por meio de tecnologias de layout da Web de Folhas de Estilo em Cascata (CSS), como Flexbox e Grade de CSS.