Nota
Esse conteúdo é relevante para o modo Flex no Editor Clássico e no Editor 2.0. Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa .
A tecnologia Flexbox (abreviada como "flex") é um módulo de layout CSS para organizar itens em seções e colunas, permitindo que eles se adaptem (cresçam/diminuam) e se alinhem perfeitamente dentro de um contêiner. Isso permite que você crie seções responsivas e com precisão de pixels, que se adaptam a qualquer tamanho de tela. Se você estiver usando o Editor Clássico, poderá entrar no modo flexível para criar designs com a tecnologia flexbox. Se estiver usando o Editor 2.0, a tecnologia flexbox é usada por padrão.
Dica
Cursos recomendados da Duda Academy:
-
PrincípiosBasic de projeto. Aprenda sobre os quatro pilares do design (marca, tipografia, cor e mídia).
-
Tamanho e unidades. Saiba mais sobre as diferentes unidades de medida no painel de design e quando usá-las.
-
Elementos essenciais de layout. Aprenda sobre colunas e subcolunas e como alinhar e dimensionar elementos dentro delas.
-
Layouts com grades avançadas. Aprenda a criar layouts complexos com grades avançadas.
O painel de design é exibido no lado direito do modo flexível e contém as propriedades de design do elemento selecionado (seção, coluna, widget, coluna interna ou grade avançada). Cada elemento tem propriedades diferentes que podem ser ajustadas no painel de design, o que significa que as propriedades de design são diferentes dependendo do elemento selecionado. As propriedades do design incluem alinhamento, layout, espaçamento, dimensionamento e muito mais, dependendo do elemento selecionado.
Para abrir o painel de design, clique em um elemento enquanto estiver no modo flexível e, em seguida, clique em Editar design (você só precisa estar no modo flexível se estiver usando o editor clássico). O painel de design abre no lado direito do modo flexível, para não interferir na sua capacidade de visualizar e editar o seu design. Após fechar o painel de design, você pode abri-lo novamente clicando no ícone do painel de design no canto superior direito.
O painel de design é composto por 5 seções: Alinhamento, Layout, Espaçamento, Tamanho e Animação e Plano de Fundo. Veja a seguir uma descrição de cada seção e o que você pode realizar.
Disponível em cada elemento dentro de uma coluna ou Inner Column. Cada elementos dentro de uma coluna ou Inner Column vertical com layout automático vertical pode ser alinhado à esquerda, ao centro ou à direita; ou ser esticado na horizontal para preencher toda a largura do contêiner.
Os elementos também podem ser alinhados no menu flutuante clicando no ícone Alinhar() .
Largura total
Anteriormente denominada "full bleed", a largura total está disponível apenas para seções e só pode ser alterada no ponto de interrupção principal desktop. Quando ativado, ele permite que o conteúdo se estenda por toda a largura da tela. Quando ativada para Desativado, a largura do conteúdo pode abranger no máximo 1920 pixels. Por padrão, a configuração de largura total é desativada. Para saber mais sobre pontos de interrupção, consulte Tamanhos de tela e dispositivos.
Alinhamento de Conteúdo
Permite alinhar vários elementos em uma coluna ou coluna interna simultaneamente, tanto vertical quanto horizontalmente. No editor clássico, os elementos só podem ser alinhados individualmente e horizontalmente. Para obter mais informações, consulte Alinhamento e Espaçamento.
Layout
Seleciona se elementos dentro de uma coluna ou Inner Columns serão automaticamente alinhados na horizontal ou na vertical. Como padrão, os elementos são alinhados na vertical. Os elementos só podem ser movidos na mesma direção do alinhamento do layout automático. Por exemplo: se os elementos estiverem na alinhados vertical, você só poderá mover na vertical, não na horizontal. O layout automático garante um design otimizado para seguir os pontos de interrupção.
Alinhar linhas
Fixa o alinhamento das linhas dentro da coluna ou Inner Columns. Esta configuração não afeta o alinhamento dos elementos dentro das linhas, apenas as linhas em si.
Para saber mais sobre espaçamento, confira o seguinte vídeo:
Espaço entre os itens
Permite definir o espaço entre colunas ou widget uma vez e se aplica a todas as colunas de uma seção ou a todos os widget de uma coluna. Para colunas, se a propriedade de layout automático estiver definida como vertical, o espaço entre widget é medido em pixels. Se o layout automático for horizontal, o espaço entre widget é medido em porcentagens. Essa propriedade não se aplica a elementos dentro de colunas internas ou grades avançadas.
Definir margens e preenchimento
As margens são o espaço entre a borda do elemento e a borda da seção, coluna, coluna interna ou grade avançada em que ele está contido. Por padrão, os valores da margem horizontal e do espaçamento estão vinculados. Se você ajustar o valor à esquerda, o valor do lado direito será atualizado automaticamente para corresponder. Se você não quiser que os valores sejam vinculados, clique no ícone do link.
Observe que as margens embutidas para elementos dentro de colunas ou colunas internas podem ser ajustadas diretamente na tela. Para saber mais, consulte Espaçamento externo e interno.
O preenchimento (padding) é o espaço interno do elemento. Clique no número da margem ou do preenchimento para digitar um novo valor e, em seguida, use o menu suspenso para selecionar a unidade em que o espaço é medido (px, %, vh, vw ou A). Por padrão, o espaçamento horizontal é medido em porcentagem e o espaçamento vertical é medido em pixels.
Por exemplo, se você selecionar uma coluna e definir o espaçamento esquerdo para 5 px, ele adicionará 5 px de espaço entre a borda esquerda da coluna e a borda externa dos elementos dentro da coluna. Se, para essa mesma coluna, você definir a margem esquerda para 5 px, ela adicionará 5 px de espaço entre a borda da coluna e a borda da seção que a contém.
Redefinir preenchimento ou margem
Quando clicado no painel do projeto ou no menu flutuante, ele zera o preenchimento ou as margens do elemento selecionado.
Dependendo do elemento selecionado, você pode ajustar a altura e a largura e os valores máximo e mínimo. No modo flexível, a altura pode ser medida em px, vh, porcentagem e A. No entanto, a altura das colunas flexíveis e o espaço entre as colunas só podem ser medidos em porcentagem. Para saber mais sobre unidades de tamanho, consulte Unidades de tamanho.
As unidades de tamanho padrão são diferentes para cada elemento. Por exemplo, por padrão, as caixas de texto têm 100% de largura, os botões têm 280 px de largura.
Para seções, você só pode alterar a altura. A largura da seção é definida pelo dispositivo, enquanto a largura do conteúdo na seção é definida pela configuração Largura do conteúdo no Tema do site. Para colunas, você só pode alterar a largura e a altura definida pela altura da seção ou por seus elementos internos. Para Inner Columns e widget, o senhor pode definir a altura e a largura, juntamente com os valores mínimo e máximo de cada uma. Qualquer tamanho de unidade pode ser usado.
As propriedades de animação e plano de fundo no modo flexível são semelhantes às do editor clássico. Para saber mais sobre as propriedades da animação e do plano de fundo, consulte Adicionar animações e personalizar o plano de fundo.
Nota
O Parallax está disponível para todos os widget e contêineres, e pode ser aplicado em todos os tamanhos de tela. Para ativar a paralaxe, clique na imagem, selecione Editar design, vá até a seção Plano de fundo do painel de design e abra o menu Posição da imagem.
A opção de manter uma imagem de fundo estática não está disponível para tablet, celular e Mac OS devido a uma limitação do iOS.
Devido à capacidade de criar composições em estilo livre e elementos sobrepostos, o painel de design das grades avançadas tem propriedades que outros tipos de elemento não têm. Recomendamos conferir seu design em diferentes pontos de interrupção.
Alinhar
Na grade avançada, cada elemento pode ser alinhado e esticado em qualquer direção, pois não são limitados pelo layout automático.
Pedido
Na seção Arranjo do painel de design, essa propriedade só pode ser usada quando há vários elementos dentro de uma grade avançada. Permite que você traga um elemento selecionado para frente, para frente, para trás ou para trás. Para obter mais informações, consulte Criar elementos sobrepostos.
Reorganizar o layout
Seleciona como as colunas e linhas são organizadas na grade avançada para criar um layout.
Personalizar o layout
Seleciona como as colunas e linhas são organizadas na grade avançada para criar um layout.
Alfinete
Fixa a posição do elemento dentro da grade. O elemento permanecerá na mesma posição mesmo quando o tamanho da grade for alterado.
Localização da grade
Disponível nos elementos dentro de uma grade avançada que foram divididas em colunas e/ou linhas para criar um layout. Mostra onde o elemento está na grade.
Mantenha proporções
Quando ativado, ele garante que os elementos dentro de uma grade avançada mantenham suas proporções mesmo quando o tamanho da grade muda.
O widget Image também contém um botão de alternância Keep proportion (Manter proporção ), que mantém as proporções originais.
Nota
Esse conteúdo é relevante para o modo Flex no Editor Clássico e no Editor 2.0. Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa .
Compreender e utilizar com eficácia as unidades de tamanho é crucial para criar layouts que não sejam apenas visualmente atraentes, mas também responsivos em vários dispositivos e tamanhos de tela. O painel de design, localizado no lado direito da tela do editor no Editor 2.0 ou quando no modo Flex no Editor Clássico, serve como centro de controle das propriedades de design dos elementos selecionados, incluindo seções, colunas, widget, colunas internas e grades avançadas. Este artigo analisa as unidades de tamanho disponíveis no painel de design e oferece exemplos práticos de seu uso.
Além disso, o Editor 2.0 permite que os usuários configurem unidades de tamanho a partir do ponto de interrupção principal (desktop), garantindo a escalabilidade em todos os tamanhos de tela. Os usuários podem ajustar as unidades de tamanho nos pontos de interrupção do tablet e do celular sem afetar outros pontos de interrupção. Para obter mais informações, consulte Tamanhos de tela e dispositivos.
Dica
Curso recomendado da Duda Academy:
-
Unidades de tamanho. Saiba mais sobre as diferentes unidades de medida no painel de design e quando usá-las.
A porcentagem (%) é uma unidade de tamanho dinâmico que determina a proporção do contêiner (seção, coluna, coluna interna ou grade avançada) ocupado pelo elemento em vários tamanhos de tela. Normalmente, as larguras dos elementos flexíveis são padronizadas como porcentagens. É recomendável usar porcentagens para manter a consistência do design em todos os tamanhos de tela sem a necessidade de ajustes manuais de pixels em cada ponto de interrupção.
Definir duas colunas em um layout para ter 50% de largura cada, garante que elas sejam automaticamente dimensionadas para 50% em todos os tamanhos de tela.
As porcentagens são benéficas para preservar os tamanhos relativos dos elementos em diferentes dimensões de tela. Isso significa que os elementos são dimensionados proporcionalmente ao contêiner principal (seção ou coluna), garantindo uniformidade na aparência do layout.
Por exemplo, uma imagem definida com 50% de largura dentro de uma coluna sempre ocupará metade da largura da coluna, independentemente do tamanho da tela. Consequentemente, embora a coluna e a imagem possam parecer mais estreitas em dispositivos móveis em comparação com desktops, a imagem mantém sua largura proporcional. Da mesma forma, definir o espaçamento entre as colunas para 4% garante um espaçamento consistente em relação às colunas e outros elementos da tela, adaptando-se a diferentes tamanhos de tela.
Os pixels (px) fornecem uma unidade de medida fixa que não é afetada pelas variações de tamanho do dispositivo. Por exemplo, um botão definido como 250 px mantém seu tamanho em dispositivos móveis, tablets e desktops.
Entretanto, usar somente pixels para o dimensionamento pode comprometer a responsividade, exigindo ajustes manuais em cada ponto de interrupção. Portanto, embora os pixels garantam a consistência no tamanho dos elementos, para um design responsivo, é melhor usar porcentagens em vez de pixels. Esta técnica reduz a necessidade de ajustes pontuais de pixels nos pontos de interrupção, simplificando o processo de design e melhorando a responsividade.
A largura da janela de visualização (Vw) ajusta dinamicamente os elementos com base na largura da tela (janela de visualização), garantindo uma escala proporcional em diferentes dispositivos. Por exemplo, atribuir 50 Vw a um elemento aloca metade da largura da tela.
A altura da viewport (Vh) dimensiona dinamicamente os elementos conforme a altura da tela (viewport) do dispositivo. Por exemplo, ao atribuir 25 vh a um elemento, você destina um quarto da altura total da tela (25%) para esse elemento. Isto é particularmente útil para fundos de tela inteira (100% Vh) ou elementos que requerem ajuste com a altura da tela.
A unidade automática redimensiona-se de acordo com a altura do conteúdo, ideal para ajustar o tamanho de blocos de texto e alturas de colunas, assegurando que se ajustem ao conteúdo. Os blocos de texto normalmente utilizam unidades automáticas como padrão. Esse recurso permite que os elementos se expandam ou se contraiam sem problemas, preservando as proporções do layout.
O conceito pai-filho governa a organização dos elementos, com elementos primários, como cabeçalhos, corpos, menus e rodapés, contendo pelo menos uma seção. Cada seção, por sua vez, abriga pelo menos uma coluna, servindo de contêiner para vários elementos, como texto, imagens ou widget, como Inner Columns e Advanced Grids.
Os elementos pai retêm suas configurações de design, permitindo controle centralizado sobre sua aparência. No entanto, se uma seção dentro de um elemento pai tiver sua própria cor de fundo definida, ela pode sobrepor-se à cor de fundo do elemento pai. Essa estrutura hierárquica assegura uma abordagem sistemática para a organização do site, tornando os fluxos de trabalho de design mais eficientes e garantindo uma apresentação coerente do conteúdo.
A hierarquia dos elementos segue uma estrutura padrão: as seções contêm colunas e as colunas contêm widget. Essa disposição hierárquica garante que não seja possível adicionar um widget diretamente a uma seção sem que ele esteja aninhado em uma coluna. Há várias maneiras de selecionar um elemento (seção, coluna ou widget):
-
Seleção direta de objetos na tela do editor: os usuários podem interagir diretamente com elementos na tela do editor, facilitando a identificação e a modificação de componentes específicos sem a necessidade de navegação extensiva por painéis ou menus. Ao selecionar um objeto, o painel de design com todas as opções de design relevantes para esse elemento aparecerá no painel de design à direita.
-
Menu flutuante Breadcrumbs: os usuários podem navegar de volta para os contêineres principais usando breadcrumbs no menu flutuante. Ao selecionar um elemento específico, os usuários podem simplesmente clicar nas migalhas de pão azuis na parte superior do elemento para retornar ao contêiner principal.
-
Parte superior do painel de design Breadcrumbs: O painel de design também inclui opções de navegação na parte superior na forma de breadcrumbs. Essas migalhas de navegação permitem que os usuários saltem rapidamente entre diferentes seções ou elementos dentro da tela.
-
Painel de camadas: quando um elemento é selecionado, o painel de camadas destaca as camadas associadas a esse elemento. Simultaneamente, o editor fornece feedback visual, auxiliando na navegação na tela.
As seções flexíveis são linhas com duas colunas flexíveis padrão que criam um layout básico. Depois de adicionar uma seção, você pode adicionar, remover ou reorganizar colunas adicionais, colunas internas ou grades avançadas para criar o layout desejado. Em seguida, o senhor pode adicionar widget a esse layout.
Para adicionar uma seção:
-
Passe o mouse entre as linhas e clique em +Adicionar seção. Ou clique com o botão direito do mouse para abrir o menu de contexto, clique em Adicionar e selecione a seção Flex.
-
No painel lateral, clique em Flex Sections.
-
Selecione a seção flex desejada.
-
Clique em Salvar.
Nota
-
A opção de manter a imagem de fundo estática não está disponível para tablets e celulares devido a uma limitação do iOS.
-
Você também pode criar uma seção flexível com IA. Para obter instruções detalhadas sobre como criar seções flexíveis com IA, consulte Criar uma seção flexível com IA.
Para salvar uma seção:
-
hover sobre a seção desejada e clique em Flex Section no canto superior esquerdo da seção.
-
Clique em Salvar como seção e, em seguida, clique em Selecionar somente esta linha.
-
Digite um nome para a seção, selecione a categoria em que a seção será salva e selecione as permissões para a seção.
-
Clique em Começar a criar.
-
Clique em Concluído.
Após adicionar uma seção ao site, você pode adicionar colunas para conter os widgets na seção. As seções já vêm com colunas, mas você pode adicionar outras.
Observe que o número máximo de colunas é 8.
Nota
Quando você adiciona um elemento a uma coluna, a posição é determinada pelas configurações automáticas de layout. Para alterar a direção do layout automático, abra o painel de design e, na seção Layout, selecione horizontal ou vertical para o layout automático.
Você pode duplicar uma coluna e ela será adicionada à direita do cartão original. Você não pode adicionar colunas que excedam 100% da largura.
Para duplicar uma coluna:
-
Clique para selecionar uma coluna.
-
No menu flutuante, clique no ícone Duplicar. Ou você pode clicar com o botão direito na coluna para abrir o menu de contexto e selecionar Duplicar.
Você pode apagar uma coluna para excluí-la da seção. No entanto, como cada seção deve conter pelo menos uma coluna, você não pode apagar a última coluna da seção.
Para apagar uma coluna:
-
Clique para selecionar a coluna.
-
No menu flutuante, clique no ícone Excluir. Ou você pode clicar com o botão direito na coluna para abrir o menu de contexto e selecionar Excluir.
O senhor pode adicionar widget a colunas, colunas internas ou grades avançadas de várias maneiras diferentes. Se você já estiver no modo flexível, poderá adicionar widgets diretamente do painel lateral clicando em Widgets e selecionando o widget desejado.
Nota
Se estiver usando o modo flexível no Editor clássico, não será possível arrastar e soltar um widget em uma coluna flexível a partir do painel lateral.
Para adicionar um widget:
-
Clique em uma coluna, Inner Column ou planilha avançada para selecioná-la.
-
Clique no ícone de mais no meio da coluna, Inner Column ou grade avançada; ou clique no ícone de mais no menu flutuante.
-
Selecione um widget.
Você também pode adicionar widgets pelo painel de camadas.
Para adicionar um widget pelo painel camadas:
-
Clique para selecionar uma coluna.
-
No painel de camadas, passe o cursor sobre a coluna, Inner Column ou grade avançada à qual adicionar o widget e clique no ícone de mais.
-
Selecione um widget.
O alinhamento e o espaçamento podem ser usados juntos para ajudá-lo a realizar seus projetos.
Para saber mais sobre alinhamento, confira o vídeo a seguir:
Ao projetar com o Flex, você pode economizar tempo alinhando vários elementos na mesma seção, coluna ou coluna interna ao mesmo tempo.
Para alinhar vários elementos:
-
Selecione a seção, coluna ou coluna interna e clique no ícone de alinhamento (
) no menu flutuante.
-
Selecione o alinhamento desejado.
O painel de design oferece outras opções de alinhamento, como alterar a direção do layout automático, o alongamento e muito mais.
Para alinhar elementos do painel de design:
-
Clique com o botão direito na seção, coluna ou coluna interna desejada e selecione Editar design.
-
Na seção Layout do painel de design, em Alinhamento de conteúdo, selecione o alinhamento vertical e horizontal de conteúdo desejado.
Ao alinhar o texto do menu flutuante ou do painel de design, ele alinha o texto e a tag div.
É possível alinhar vários elementos ao mesmo tempo, mas às vezes você só precisa alterar o alinhamento de um elemento dentro de uma coluna flex sem afetar os outros elementos.
Para alinhar um elemento:
-
Selecione o elemento desejado.
-
No menu flutuante, clique no ícone de alinhamento (
Espaço entre elementos
É possível fixar a quantidade de espaço horizontal ou vertical entre colunas dentro da mesma seção flex ou widgets dentro de uma coluna, Inner Column ou grade avançada.
Para fixar o espaçamento entre os elementos:
-
Clique com o botão direito na seção, coluna, coluna interna ou grade avançada desejada e selecione Editar design.
-
Na seção Espaçamento do painel de design, em Espaçamento entre elementos, digite ou use o controle deslizante para definir o valor percentual do espaço horizontal ou o valor em pixels do espaço vertical que você deseja que exista entre os elementos no campo Espaçamento entre itens.
Você pode redefinir o espaçamento das seções e das colunas clicando no ícone Redefinir preenchimento no menu flutuante.
As seções flex criam um layout e alinham automaticamente os objetos, para você criar belas seções com facilidade e rapidez. No entanto, para um design mais complexo, com objetos sobrepostos ou composição com estilo livre, você precisa de uma grade avançada, que coloca os elementos numa composição de estilo livre sem layout automático. Por isso, recomendamos checar seu projeto em todos os pontos de interrupção.
Para aprender a criar elementos sobrepostos, confira o vídeo a seguir ou siga as instruções abaixo.
Para criar elementos sobrepostos:
-
Clique para selecionar uma coluna flex.
-
No menu flutuante ou na coluna flexível, clique no ícone de adição (
).
-
Na seção de elementos flexíveis, selecione Grade avançada (anteriormente denominada contêineres). Para garantir que você siga as melhores práticas, arraste as bordas da grade avançada para que ela abranja toda a largura da coluna flexível.
-
Na seção Layout do painel de design, selecione uma grade predefinida em Reorganizar layout. Ou se quiser criar sua própria grade, use os menus suspensos Colunas e Linhas em Personalizar layout para adicionar colunas e/ou linhas.
-
No menu flutuante, clique no ícone de mais, selecione os widgets desejados e organize-os na grade avançada.
-
Clique para selecionar um elemento e, na seção Organizar do painel de design, selecione Trazer para frente, Trazer para frente, Enviar para trás ou Enviar para trás.
Ao usar as grades avançadas, recomendamos conferir o design em cada ponto de interrupção. Com elementos sobrepostos, talvez você precise ajustar o design em determinados pontos de interrupção.
No web design, a escolha do sistema de layout adequado influencia significativamente a experiência do usuário, especialmente ao integrar elementos de layout de widget, como Inner Column e Advanced Grid, em um site.
Dica
Cursos recomendados da Duda Academy:
-
Elementos essenciais de layout. Aprenda sobre colunas e subcolunas e como alinhar e dimensionar elementos dentro delas.
-
Layouts com grades avançadas. Aprenda a criar layouts complexos com grades avançadas.
O widget de coluna interna é recomendado para:
-
Layouts modulares: perfeitos para criar layouts modulares em que o conteúdo flui linearmente, tornando-os ideais para menus de navegação, cartões ou layouts semelhantes a listas.
-
Design responsivo: Destaca-se na criação de designs responsivos que se adaptam perfeitamente a diversos tamanhos de tela e dispositivos, garantindo alinhamento e legibilidade ideais.
-
Conteúdo dinâmico: adequado para lidar com conteúdo dinâmico que pode variar em comprimento ou tamanho, permitindo que os designers controlem dinamicamente o comportamento e o tamanho dos itens em um contêiner.
-
Layouts aninhados: os recursos de aninhamento de colunas internas os tornam adequados para criar layouts aninhados complexos. Os designers podem agrupar mais colunas internas no contêiner externo conforme necessário, fornecendo flexibilidade e adaptabilidade na organização das hierarquias de conteúdo. Da mesma forma, o Advanced Grid oferece a possibilidade de aninhar widget, colunas internas e até mesmo Advanced Grids adicionais em sua estrutura de layout.
O widget de grade avançado é recomendado para:
-
Estruturas de layout complexas: indispensáveis para criar layouts complexos com várias linhas e colunas, fornecendo controle preciso sobre o posicionamento e o dimensionamento dos elementos.
-
Projetos não lineares: perfeitos para projetar layouts não lineares em que os elementos precisam ser posicionados independentemente da ordem de origem para composições criativas e arranjos assimétricos. Isso significa que os elementos podem ser colocados e organizados com base nos requisitos do projeto.
-
Web design responsivo: Embora exija um planejamento cuidadoso, o Advanced Grid oferece o robusto tool para a criação de designs responsivos. Os designers podem definir ajustes específicos de layout, como reordenação de colunas, abrangência de itens e lacunas na grade em diferentes tamanhos de janelas de visualização, garantindo uma apresentação ideal em vários dispositivos.
Quando devo usar um widget de coluna interna em vez de um widget de grade avançada?
As colunas internas são mais adequadas para layouts modulares, especialmente quando você precisa de controle preciso sobre itens individuais em uma seção ou quando deseja um layout automático. No entanto, observe que, embora as Inner Columns mantenham a integridade da seção, mover widget dentro delas é menos flexível em comparação com as Advanced Grids.
As colunas internas permitem o controle sobre linhas ou colunas individualmente, ideais para layouts unidimensionais. O Advanced Grids permite a manipulação de linhas e colunas simultaneamente, fornecendo controle abrangente sobre toda a estrutura do layout, ideal para layouts bidimensionais.
O Advanced Grid (CSS Grid) pode ter uma vantagem marginal no tratamento de layouts complexos, otimizando a estrutura do DOM, a eficiência da renderização, o carregamento de recursos, a capacidade de resposta e minimizando as solicitações HTTP. As colunas internas, embora eficazes, podem envolver mais elementos HTML aninhados, potencialmente levando a tempos de renderização um pouco mais lentos em comparação às grades avançadas.
Também é possível usar tanto o widget de coluna interna quanto o widget de grade avançada na mesma seção e em todo o site para obter os designs desejados. Isso envolve encontrar um equilíbrio entre a estrutura geral do layout e os detalhes mais sutis da organização do conteúdo.
Compreender as relações entre pais e filhos é fundamental para aproveitar as colunas internas e as grades avançadas de forma eficaz. Nesses sistemas de layout, a coluna que abriga os elementos atua como pai, enquanto os elementos dentro dela, como os adicionais widget, são considerados filhos. Essa relação determina como os elementos são posicionados e alinhados dentro do layout, garantindo coerência e integridade estrutural em seu web design.
É importante observar que nem sempre é necessário adicionar colunas internas. Muitas vezes, uma única coluna pode ser suficiente para muitos casos de uso. A coluna interna permite a fácil colocação de elementos na horizontal ou na vertical. Os requisitos incluem uma seção para atuar como contêiner flexível e uma coluna para abrigar colunas internas, com os dois tipos de colunas servindo como itens flexíveis, representando o elemento pai e filho, respectivamente.
O Advanced Grid permite a colocação de elementos nas direções vertical e horizontal. Os requisitos incluem uma seção para atuar como um contêiner e uma grade avançada para declarar o layout da grade no elemento ou contêiner pai, fazendo com que todos os seus filhos se tornem itens da grade.