Como usar layouts de grade de CSS para criar uma página

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 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 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
    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.

    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

    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é 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 IU para obter mais informações sobre como criar experiências.
    3. Criar uma página no Construtor de IU.
    4. Selecione o botão + Adicionar conteúdo na fase Construtor de IU.
    5. Selecione Grade na guia Layouts.
      Seta apontando para a opção Grade na guia de layouts da caixa de ferramentas.
    6. Selecione a guia Estilos no painel de configuração.
    7. Na seção Layout, você deve ver a Grade realçada.
      Seta apontando para a opção Grade na guia de estilos do painel de configuração.
    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.
      Gap
      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 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 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. 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

    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é 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 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
      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
      Opção Editar 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
      Seta apontando para o botão 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
      Seta apontando para 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
      Colando 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
      Modificando 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.

      Figura 8. Áreas de modelo de grade
      Áreas de modelo de grade.
    10. Recolha a exibição expandida e clique em Aplicar.
      Figura 9. Aplicar uma mudança de layout
      Aplicando uma mudança de layout.

    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
    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
    Seta apontando para redefinir para a opção original.