--- 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 --- # Como usar layouts de grade de CSS para criar uma página # Como usar layouts de grade de CSS para criar uma página {#ariaid-title1} * Versão de lançamento: Xanadu * * Atualizado 1 de ago. de 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 min. de leitura 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. Grade de CSS é o sistema de layout mais poderoso em CSS. A grade de CSS é criada sobre uma grade bidimensional. A grade de CSS oferece controle sobre como você cria suas páginas. Use Construtor de IU para implementar um layout de grade de CSS usando propriedades de configuração de layout com low-code. Para layouts avançados, você pode exibir e editar o código CSS para personalizar seus layouts. Visite a [Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) para saber mais sobre grade de CSS. Por exemplo, você pode ter uma grade com três colunas e três linhas para criar uma grade de nove células. Você pode colocar componentes dentro dessas células ou fazer com que o componente se estenda por várias células. Figura 1. Layout de grade de CSS Personalizar o layout da página permite que você aproveite ao máximo a grade de CSS para que você possa alcançar o design geral da página. Para obter mais informações, consulte [Organizar componentes nas páginas do Construtor de IU](https://servicenow-prod.fluidtopics.net/W5Y8aZAAxPm3_iU~bzWHkw "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."). Para saber mais sobre layouts de CSS na instância Construtor de IU, você pode encontrá-los na tabela \[sys_uib_template\]. ## Criar um layout de grade de CSS com o novo sistema de layout {#ariaid-title2} Crie um layout de grade de CSS em Construtor de IU para criar páginas poderosas em um ambiente low-code. ### Antes de Iniciar Função necessária: administrador ### Procedimento 1. Navegar até TodosEstrutura do Now ExperienceConstrutor de IU. 2. Abra uma experiência para trabalhar ou crie uma experiência selecionando CriarExperiência. Consulte [Configure como os usuários interagem com suas aplicações no Construtor de IU](https://servicenow-prod.fluidtopics.net/lLqYhwc21ggWGJvxakpXWA "Saiba o que é uma experiência em Construtor de IU. Entenda o que uma experiência contém.") para obter mais informações sobre como criar experiências. 3. [Criar uma página no Construtor de IU](https://servicenow-prod.fluidtopics.net/oXLwDAYTDqDRVYtO2ECqbg "Crie uma página em Construtor de IU para um portal, espaço ou aplicação personalizada para que você possa criar uma experiência na Web para seus usuários."). 4. Selecione o botão + Adicionar conteúdo na fase Construtor de IU. 5. Selecione Grade na guia Layouts. 6. Selecione a guia Estilos no painel de configuração. 7. Na seção Layout, você deve ver a Grade realçada. 8. Na seção Layout da guia de estilos, você pode alterar o seguinte: Colunas : Define o número, a ordem e a largura das colunas da grade. Linhas : Define o número, a ordem e a largura das linhas da grade. Direção : Define se os componentes recém-adicionados são empilhados horizontalmente ou verticalmente. Lacuna : Define o tamanho da lacuna entre linhas e colunas. Nota: Selecione Mostrar opções avançadas de layout para ver as próximas quatro opções. Alinhar itens : Define como os componentes dentro do contêiner se alinham como um grupo. Justificar itens : Define como o navegador distribui o espaço entre e ao redor dos itens de conteúdo ao longo do eixo em linha de um contêiner de grade. Alinhar conteúdo : Define a distribuição de espaço entre e ao redor de itens de conteúdo ao longo do eixo de bloco de uma grade. Justificar conteúdo : Define como juntar ou separar os componentes no contêiner. Visite a [Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) para saber mais sobre configurações de layout de grade de CSS. 9. **Opcional:** Você pode editar o código CSS selecionando Mostrar opções de configuração avançadas na parte inferior da guia Estilos e selecionando a opção Exibir e editar CSS. 10. Selecione Salvar. Sua página é atualizada e exibe as mudanças feitas no layout. 11. Adicione componentes à sua página. Para obter mais informações, consulte [Adicionar e configurar componentes](https://servicenow-prod.fluidtopics.net/Aqc1bei9skOZ0arABedMFw#add-components "Saiba como adicionar componentes à sua página em Construtor de IU. Uma página é criada adicionando componentes."). 12. Exiba e teste sua página selecionando ![o botão Visualizar que abre a variante de página.](). ## Criar um layout de grade de CSS com o sistema de layout antigo {#ariaid-title3} 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. ### Antes de Iniciar Função necessária: administrador ### Por Que e Quando Desempenhar Esta Tarefa No procedimento a seguir, você aprende a usar a Grade de CSS para modificar seu CSS e personalizar o layout da página. ### Procedimento 1. Navegar até TodosEstrutura do Now ExperienceConstrutor de IU. 2. Abra uma experiência para trabalhar ou crie uma experiência selecionando CriarExperiência. Consulte [Configure como os usuários interagem com suas aplicações no Construtor de IU](https://servicenow-prod.fluidtopics.net/lLqYhwc21ggWGJvxakpXWA "Saiba o que é uma experiência em Construtor de IU. Entenda o que uma experiência contém.") para obter mais informações sobre como criar experiências. 3. [Criar uma página no Construtor de IU](https://servicenow-prod.fluidtopics.net/oXLwDAYTDqDRVYtO2ECqbg "Crie uma página em Construtor de IU para um portal, espaço ou aplicação personalizada para que você possa criar uma experiência na Web para seus usuários.") ou abrir uma página. 4. Clique na guia Layout e escolha o layout de duas linhas por duas colunas. Figura 2. Layout padrão de duas linhas e duas colunas 5. Clique em Editar código de layout. Figura 3. Editar o código de layout 6. Expanda o editor de código para que você possa exibir facilmente o código CSS. Figura 4. Expandir o editor de código 7. Adicione outro slot ao layout copiando o código CSS de um slot existente. Copiar o código CSS é mais fácil do que digitá-lo no layout. Figura 5. Copiar o código CSS de um slot 8. Cole o código CSS abaixo do código que você copiou e altere slotName e grid-area para um valor exclusivo. Figura 6. Colar o código CSS 9. Modifique as regras de layout para incluir a nova coluna e a área de modelo, da seguinte forma: 1. Exclua a linha `"Grid-template-columns": "1fr 1fr"`. 2. Adicione uma segunda célula1 após a célula1e, em seguida, adicione a célula5 após a célula4. Figura 7. Modificar as regras de layout Você pode definir várias configurações diferentes. Neste exemplo, há as duas grades resultantes de duas áreas de modelo de grade diferentes. A propriedade "grid-template-areas" que está sendo modificada está definindo a propriedade CSS com o mesmo nome. Para obter mais informações, consulte [grid-templates-areas do MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas). Figura 8. Áreas de modelo de grade 10. Recolha a exibição expandida e clique em Aplicar. Figura 9. Aplicar uma mudança de layout {#create-a-css-grid-layout__steps_acx_kmr_qpb} ### Resultado O novo layout de Grade de CSS mostra que o novo slot foi adicionado ao layout original de duas linhas e duas colunas.Figura 10. Novo layout personalizado Clique em Redefinir para original para redefinir as mudanças de layout de volta para o original a qualquer momento. Figura 11. Redefinir um layout **Tarefas relacionadas** * [Criar um layout Flexbox com o sistema de layout antigo](https://servicenow-prod.fluidtopics.net/oG~8pHQ59UH9_e_htsQANw#flexbox-uib-old-layout "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.")