Aprenda a utilizar o bloco Container para criação de Páginas

O bloco Container oferece quatro modos de comportamento — Total, Normal, Flex e Fit — que determinam como ele e seus elementos internos se organizam dentro da página. Cada modo possui características específicas de largura, alinhamento e distribuição, permitindo criar desde seções amplas e imersivas até composições mais estruturadas e compactas. Escolher o modo adequado é o primeiro passo para montar layouts equilibrados e visualmente consistentes.

Total

O modo Total faz o container e seus elementos visuais internos ocuparem toda a largura da tela, de ponta a ponta, sem respeitar os limites de conteúdo do layout do portal. É a opção ideal quando o usuário deseja criar uma seção que se estenda horizontalmente, como um banner, uma faixa de cor ou um bloco com imagem de fundo que preencha toda a área visível da página. Esse modo é simples e direto, sem estrutura interna avançada de organização.

Normal

O modo Normal mantém o container dentro da largura padrão do portal, alinhado e centralizado conforme a estrutura geral do site (geralmente 1318px). É a melhor opção quando se deseja que o conteúdo obedeça à mesma proporção das demais áreas, garantindo equilíbrio visual e consistência entre as seções da página.

Flex

O modo Flex transforma o container em uma área de layout avançada, dividida em 12 colunas. Ele oferece maior controle sobre o posicionamento e o espaçamento dos elementos internos, permitindo criar composições lado a lado, grids de cards ou seções com múltiplos blocos alinhados de forma responsiva. É o modo mais flexível e indicado para estruturas personalizadas.

Quando um container Flex é inserido dentro de outro container Flex, surgem opções adicionais que permitem definir quantas colunas o container interno deve ocupar, com configurações específicas para desktop e mobile. Além disso, há a opção Expandir, que faz o container preencher automaticamente todo o espaço disponível na linha. Essas configurações ampliam o controle sobre o comportamento dos blocos, tornando o layout mais adaptável e preciso.

Fit

O modo Fit faz o container se ajustar automaticamente ao tamanho do conteúdo interno, ocupando apenas o espaço necessário. É ideal para elementos compactos, como botões, textos curtos ou grupos pequenos de componentes que não precisam preencher toda a largura da linha.Estrutura em camadas

A organização interna de um container define como os elementos dentro dele serão exibidos e posicionados. Existem dois comportamentos principais: Block e Flex. O modo Block segue a lógica tradicional de empilhar os elementos verticalmente, um abaixo do outro, ocupando toda a largura disponível. Já o modo Flex oferece uma abordagem mais dinâmica, permitindo organizar os itens em linha ou coluna, com controle sobre alinhamentos, espaçamentos e proporções.

Na prática, o modo Flex é o mais utilizado, pois oferece maior liberdade e precisão no layout. A seguir, vamos explorar em detalhes como ele funciona e como tirar o máximo proveito de suas propriedades.

Modo Flex

No modo Flex, o usuário pode definir a direção em que os elementos serão organizados: vertical ou horizontal. No modo vertical, os elementos dentro do container são empilhados um sobre o outro, seguindo uma lógica de coluna. Já no modo horizontal, eles são distribuídos lado a lado, formando linhas. Nesse caso, existe ainda a opção Permitir quebra de linha, que faz com que o container reorganize os blocos automaticamente quando a soma das colunas atinge o limite de 12.

Por exemplo, se houver um bloco de tamanho 5 e outro de tamanho 7, ambos serão exibidos na mesma linha (5 + 7 = 12). Mas se houver um bloco de 8 e outro de 6, o segundo será movido para a linha abaixo, respeitando o limite de colunas disponíveis. Nos dois casos acima o container pai está configurado da mesma forma, o tamanho dos containers internos vai determinar como eles serão distribuídos.

Alinhamento e Justificação

As opções de alinhamento e justificação definem o posicionamento e a distribuição dos elementos dentro de um container. O alinhamento atua no eixo vertical, controlando o posicionamento dos blocos de cima para baixo, enquanto a justificação organiza os elementos no eixo horizontal, ajustando o espaçamento e a forma como ocupam o espaço disponível.

Quando a soma dos blocos internos não ultrapassa 12 colunas, a justificação passa a influenciar diretamente na distribuição horizontal desses elementos, equilibrando visualmente o layout de acordo com a configuração aplicada. No exemplo abaixo, é possível observar como diferentes combinações de alinhamento e justificação se comportam em um container pai de 12 colunas que contém blocos internos de 4, 6 e 8 colunas — veja abaixo.

Gap

O gap define o espaçamento entre os elementos internos de um container, funcionando como o “respiro” entre os blocos que ele contém. Esse ajuste é essencial para manter a harmonia visual e garantir que os conteúdos não fiquem colados uns aos outros, especialmente em layouts com múltiplas colunas ou subdivisões. O valor definido para o gap se aplica tanto no eixo horizontal quanto no vertical, respeitando a direção e o tipo de organização do container.

Organizações Avançadas com Flex

O comportamento Flex também possibilita a criação de organizações avançadas, permitindo estruturar layouts mais complexos dentro de um mesmo container. Isso acontece porque um container flex pode conter outros containers flex em seu interior, cada um com sua própria grade de 12 colunas.

Dessa forma, é possível, por exemplo, ter um container principal de 12 colunas que abriga um container interno de 8 colunas, e dentro dele, uma nova subdivisão com distribuição independente, possuindo alinhamentos e justificações próprios. Esse tipo de estrutura é especialmente útil para construir seções com múltiplos níveis de organização, mantendo flexibilidade e coerência visual.

As opções de padding e margin estão disponíveis dentro da Guia Estilo do bloco Container e são fundamentais para controlar o espaçamento e a proporção dos elementos na página.

A margin define o espaço externo do container, ou seja, a distância entre ele e os demais elementos ao redor. É útil para ajustar separações entre seções e criar respiros visuais no layout. Em alguns casos, o usuário pode aplicar valores negativos de margin, o que faz o container se sobrepor parcialmente a outros elementos — um recurso avançado que pode ser usado para efeitos visuais mais dinâmicos.

O padding, por sua vez, determina o espaçamento interno do container, ou seja, a distância entre as bordas do container e seu conteúdo. O conteúdo interno sempre se molda ao espaço disponível dentro dessas bordas, assumindo dimensões proporcionais à largura total do container menos o padding aplicado. Isso garante que o conteúdo mantenha uma boa legibilidade e alinhamento, independentemente do tamanho ou comportamento do container.

Em resumo, o margin (em verde) preserva as dimensões originais do container, acrescentando uma área externa que amplia o espaçamento ao redor sem alterar sua largura ou altura. Já o padding (em rosa) atua internamente, moldando o espaço utilizado dentro do container e ajustando a distância entre seu conteúdo e as bordas. Veja o exemplo abaixo.

Ainda dentro da Guia Estilo, é possível personalizar o fundo e as bordas do container, permitindo que cada seção tenha identidade visual própria e se destaque dentro da página. Essas configurações ajudam a definir contrastes, delimitar áreas e reforçar a hierarquia visual do conteúdo.

Background

Em Background, existem três principais formas de personalização: cor, gradiente e imagem.

• Cor: o usuário pode aplicar uma cor sólida como fundo do container, com a opção de ajustar a transparência para criar sobreposições sutis ou efeitos de destaque mais leves.
• Gradiente: é possível configurar degradês lineares ou radiais, adicionando múltiplos pontos de cor, também compatíveis com transparência. Esse recurso é ideal para criar fundos com transições suaves e maior profundidade visual.
• Imagem: o usuário pode definir uma imagem de fundo para o container, com opções avançadas de posicionamento e comportamento.

Quando uma imagem é aplicada, é possível ajustar:

• Repetição: quando a imagem não está configurada como cover, o usuário pode optar por repeti-la horizontal e/ou verticalmente, preenchendo todo o espaço disponível com um padrão contínuo.
• Alinhamento: define em qual área do container a imagem será posicionada (como centro, topo ou canto).
• Comportamento: controla o modo como a imagem se adapta ao container:
• Contain: a imagem é redimensionada para caber completamente dentro do container, podendo deixar margens visíveis.
• Auto: a imagem mantém seu tamanho original, sem redimensionamento automático.
• Cover: a imagem é ampliada para cobrir todo o container, podendo ser cortada nas bordas.

Bordas

Ainda dentro da Guia Estilo, há também a seção dedicada às bordas do container. Nela, é possível definir individualmente a espessura de cada lado — superior, inferior, esquerdo e direito —, permitindo criar composições mais detalhadas e com maior controle visual.

Além disso, há um segmento específico para o arredondamento das bordas, que pode ser configurado de forma independente para desktop e mobile. Essa flexibilidade facilita a adaptação do design a diferentes tamanhos de tela, garantindo que o container mantenha uma aparência coerente e equilibrada em todos os dispositivos.

Dentro da seção Opções Avançadas, existem duas configurações principais: HTML Tag e Dark Mode.

HTML Tag

A primeira delas, HTML Tag, permite definir qual tag semântica identificará o container no código HTML da página. Essa escolha ajuda na organização estrutural do conteúdo e contribui para melhorar a acessibilidade e o SEO. As opções disponíveis são:

• <div> – É o contêiner genérico usado para agrupar elementos sem valor semântico específico. Ideal para estruturas puramente visuais ou blocos auxiliares.
• <section> – Representa uma seção temática do conteúdo, geralmente usada para agrupar elementos que tratam de um mesmo assunto.
• <article> – Indica um conteúdo independente e completo, como uma notícia, post de blog ou material que pode ser compreendido isoladamente.
• <header> – Usada para identificar cabeçalhos de página ou seções, normalmente contendo logotipos, títulos ou menus de navegação.
• <footer> – Indica o rodapé de uma página ou seção, podendo conter informações complementares, créditos ou links secundários.
• <a> (link) – Transforma o container em um elemento clicável, permitindo vincular uma URL e tornando toda a área do container interativa.

O uso correto dessas tags melhora a estrutura semântica do site, tornando-o mais fácil de ser interpretado por buscadores e tecnologias assistivas, além de contribuir para a coerência do código.

Dark Mode

A segunda configuração é o Dark Mode. Ao ativar essa opção, o container passa a adotar automaticamente as variáveis de cor definidas para o modo escuro no bloco Styleguide. Essa configuração é aplicada de forma dinâmica a todos os blocos da Seox inseridos dentro do container, garantindo consistência visual entre os modos claro e escuro, sem necessidade de ajustes manuais.