Uso de layouts de Grade CSS para criar uma página

Crie um layout de Grade 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 CSS é o sistema de layout mais poderoso em CSS. A Grade CSS é criada sobre uma grade bidimensional. O CSS Grid oferece controle sobre como você cria suas páginas. Use Construtor de IU para implementar um layout de grade CSS usando propriedades de configuração de layout de baixo código. Para layouts avançados, você pode exibir e editar o código CSS para personalizar seus layouts. Visite a Mozilla para saber mais sobre Grade 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 ocupe várias células.

Figura 1. Layout de grade de CSS

Personalizar o layout da sua página permite que você aproveite ao máximo a Grade CSS para que você possa alcançar o design geral da sua página. Para obter mais informações, consulte Organizar componentes nas páginas do Construtor de IU.

Para saber mais sobre layouts CSS na sua instância Construtor de IU, você pode encontrá-los na tabela [sys_uib_template].

Criar um layout de Grade CSS com o novo sistema de layout

Crie um layout de grade CSS em Construtor de IU para criar páginas poderosas em um ambiente de baixo código.

Antes de Iniciar

Função necessária: administrador

Procedimento

1. Navegar até Todos > Estrutura do Now Experience > Construtor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando + Criar.
   Consulte Configure como os usuários interagem com suas aplicações no Construtor de IU para obter mais informações sobre como criar experiências.
3. Criar uma página no Construtor de IU.
4. Selecione o ícone + na fase Construtor de IU.
5. Selecione Grade na guia de 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 mudar 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 de layout avançadas para ver as próximas quatro opções.

   Alinhar itens

   Define como os componentes no 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 o Mozilla para saber mais sobre as 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.
12. Exiba e teste sua página selecionando .

Criar um layout de Grade CSS com o sistema de layout antigo

Crie um layout de Grade 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 sua página.

Procedimento

1. Navegar até Todos > Estrutura do Now Experience > Construtor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando + Criar.
   Consulte Configure como os usuários interagem com suas aplicações no Construtor de IU para obter mais informações sobre como criar experiências.
3. Criar uma página no Construtor de IU 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 o slotName e o grid-area para um valor exclusivo.

   Figura 6. Cole o código CSS

   

9. Modifique as regras de layout para incluir a nova coluna e á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 grade-modelos-áreas do MDN.

   Figura 8. Áreas do modelo de grade

   

10. Recolha a exibição expandida e clique em Aplicar.

    Figura 9. Aplicar uma mudança de layout

    

Resultado

O novo layout de Grade 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