Usando layouts de grade CSS para criar uma página

Crie um layout de grade CSS em Construtor de IUPara criar páginas poderosas para que você possa personalizar com folhas de estilo em cascata (CSS) e melhorar seu desempenho.

CSS Grid é o sistema de layout mais poderoso em CSS. A grade CSS é construída sobre uma grade bidimensional. A grade CSS oferece controle sobre como você cria suas páginas. Uso Construtor de IUPara implementar um layout de grade CSS usando propriedades de configuração de layout low-code. Para layouts avançados, você pode exibir e editar código CSS para personalizar seus layouts. Visita Mozilla Para saber mais sobre Grade CSS.

Por exemplo, você pode ter uma grade com três colunas e três linhas para formar 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 CSS

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

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

Crie um layout de grade CSS com o novo sistema de layout

Crie um layout de grade CSS em Construtor de IUpara criar páginas poderosas em um ambiente low-code.

Antes de Iniciar

Função necessária: administrador

Procedimento

1. Navegar até Tudo > Estrutura do Now Experience > Construtor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar > Experiência.
   Consulte Configure como os usuários interagem com suas aplicações no Construtor de IUpara obter mais informações sobre como criar experiências.
3. Crie uma página em Construtor de IU.
4. Selecione - Adicionar conteúdo no Construtor de IUfase.
5. Selecione Grade na guia layouts.
   
6. Selecione Estilos no painel de configuração.
7. Em Layout , você deve ver Grade realçado.
   
8. Em Layout da guia 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 do espaço entre e ao redor dos 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.

   Visita Mozilla Para saber mais sobre as configurações de layout de grade CSS.

9. Opcional: Você pode editar o código CSS selecionando Mostrar opções de configuração avançadas na parte inferior do Estilos e, em seguida, selecionando o. Exibir e editar CSS opção.
10. Selecione Save (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. Para exibir e testar sua página, selecione .

Crie um layout de grade CSS com o sistema de layout antigo

Crie um layout de grade CSS em Construtor de IUPara 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ê aprenderá como usar a Grade CSS para modificar seu CSS e personalizar o layout da sua página.

Procedimento

1. Navegar até Tudo > Estrutura do Now Experience > Construtor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar > Experiência.
   Consulte Configure como os usuários interagem com suas aplicações no Construtor de IUpara obter mais informações sobre como criar experiências.
3. Crie uma página em Construtor de IU ou abra uma página.
4. Clique em 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 Edite o código de layout .

   Figura 3. Edite o código de layout

   

6. Expanda o editor de código para que você possa exibir facilmente o código CSS.

   Figura 4. Expanda 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. Copie o código CSS de um slot

   

8. Cole o código CSS abaixo do código que você copiou e altere o. slotNamee. grid-areapara um valor exclusivo.

   Figura 6. Cole o código CSS

   

9. Modifique as regras de layout para incluir a nova coluna e a área do modelo, da seguinte forma:
   1. Exclua o. "Grid-template-columns": "1fr 1fr", linha.
   2. Adicione um segundo célula 1 após célula 1 e, em seguida, adicione cell5 após cell4 .

   Figura 7. Modifique as regras de layout

   

   Você pode definir muitas configurações diferentes. Neste exemplo, há as duas grades resultantes de duas áreas de modelo de grade diferentes. . "grid-template-areas"A propriedade que está sendo modificada está definindo a propriedade CSS com o mesmo nome. Para obter mais informações, consulte MDN grid-modeles-áreas .

   Figura 8. Áreas do modelo de grade

   

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

    Figura 9. Aplique 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 como original para redefinir o layout de volta ao original a qualquer momento.

Figura 11. Redefina um layout

Tarefas relacionadas

• Crie um layout Flexbox com o sistema de layout antigo