O layout fluido permite alinhar elementos para que eles ajustem automaticamente o alinhamento e as proporções a diferentes tamanhos e orientações de página. Esse tipo de layout é ideal para documentos responsivos, mas ele também pode funcionar com elementos de tamanho fixo.
Você pode usar diferentes técnicas no Google Web Designer para criar um layout fluido:
Flexbox (Fluid Layout) - Google Web Designer
Valores baseados em porcentagem
Você pode definir tamanhos e posições em porcentagens em vez de pixels para que os elementos permaneçam proporcionais e alinhados entre si.
Para usar porcentagens em vez de pixels, clique em px no campo do painel "Propriedades" e selecione % na lista suspensa.
Para converter todos os valores de posição e tamanho em porcentagens, clique no botão Usar porcentagens .
É possível usar uma combinação de valores em porcentagem e pixels no documento.
Fixação
A fixação permite alinhar de maneira persistente os elementos de um contêiner, mesmo quando o tamanho, o padding ou a largura da borda do elemento ou do contêiner são alterados. Todas as propriedades de posição ou de translação definidas deslocam o elemento do ponto de fixação.
Você seleciona um modo de fixação horizontal e um modo de fixação vertical. O padrão é "canto superior esquerdo".
Modos de fixação horizontal
| Modo | Efeito |
|---|---|
| esquerda | A borda esquerda do elemento se alinha à borda esquerda do contêiner. |
| centro | O centro horizontal do elemento se alinha ao centro horizontal do contêiner. |
| direita | A borda direita do elemento fica alinhada à borda direita do contêiner. |
Modos de fixação verticais
| Modo | Efeito |
|---|---|
| superior | A borda superior do elemento fica alinhada à borda superior do contêiner. |
| meio | O meio vertical do elemento se alinha ao meio vertical do contêiner. |
| inferior | A borda inferior do elemento fica alinhada à borda inferior do contêiner. |
Defina o modo de fixação no painel "Propriedades" ou na barra de opções da ferramenta quando a ferramenta Seleção estiver ativa.
Flexbox
O Flexbox (módulo de layout de caixa flexível do CSS) é uma maneira flexível de organizar itens em um contêiner em linhas ou colunas. Cada item pode aumentar ou diminuir para otimizar o espaço do contêiner enquanto mantém a ordem e o espaçamento especificados.
É possível usar o flexbox e configurar as propriedades dele na guia Flexbox do painel "Responsivo". Saiba mais sobre como usar o flexbox.