Editor X: usar grades
8 min de leitura
O Editor X está em transição para o Wix Studio, nossa nova plataforma para agências e freelancers.Saiba mais sobre o Wix Studio
As grades CSS são uma ótima maneira de garantir que seus elementos sejam organizados de maneira estruturada. No Editor X, cada contêiner e seção vem com uma grade integrada. Você pode escolher o número de linhas e colunas que sua composição requer e ajustar seu tamanho em várias medidas diferentes.
Neste artigo, saiba tudo sobre como trabalhar com grades no Editor X:
Quer saber mais?
Confira nossa aula sobre grades na Editor X Academy (em inglês).
Ajustar uma grade existente
Cada seção e contêiner vem com uma grade 1x1 integrada que você pode ajustar. Mude para um layout diferente com um clique ou crie sua própria grade arrastando as linhas sobre sua composição existente.
Para ajustar a grade:
- Clique no contêiner ou na seção da página relevante.
- Altere a grade de uma das seguintes maneiras:
Escolher um layout
Personalizar a grade na tela
.
Dica:
Você também pode adicionar uma seção com uma grade integrada, ao clicar no ícone Adicionar seção 
.
.Gerenciar uma grade no painel Inspetor
Personalize sua grade para obter o layout exato que você deseja. Você pode alterar o número de linhas e colunas, ajustar seu tamanho e as lacunas entre elas.
Para gerenciar uma grade:
- Clique na grade relevante.
- Clique no ícone Inspetor
na parte superior do Editor X. - Clique na aba Layout
e role para baixo até Exibição. - Escolha o que você quer fazer:
- Escolha um layout diferente: clique no dropdown Layout para selecionar uma aparência diferente que contenha o mesmo número de células que a grade existente.
- Ajuste sua grade manualmente: clique abaixo para saber como:
Adicione mais colunas ou linhas
ao lado de Colunas ou Linhas.
ao lado de uma coluna ou linha existente e selecione uma opção:
Alterar o tamanho das suas colunas ou linhas
Editar o tamanho das lacunas
Excluir uma coluna ou linha
Trabalhando com breakpoints:
Ao criar uma grade, ela só aparece no breakpoint específico em que você está trabalhando. Você deve criar uma grade para cada tamanho de tela para garantir que a composição dos seus elementos seja perfeita.
Posicionar elementos em uma grade
Ao adicionar elementos e colocá-los em sua grade, existem várias ferramentas para ajudar você a criar um layout responsivo:
Encaixar elementos
Encaixar elementos às linhas de grade garante que elas sejam posicionadas exatamente como você deseja. Quando você adiciona um elemento a uma célula da grade, ele é automaticamente encaixado nas linhas de grade verticais e horizontais mais próximas. Você pode ajustar o encaixe conforme necessário no painel Inspetor.
Mover elementos para uma célula diferente da grade
Na seção Posição no Inspetor, você pode selecionar um elemento e ver a(s) célula(s) da grade em que ele está posicionado. Clique em qualquer célula da grade para mover o elemento para lá, sem ter que usar o recurso de arrastar e soltar.
Esticar elementos para preencher uma célula da grade
Estique elementos para preencher uma célula da grade com apenas um clique. Se um elemento estiver posicionado sobre as linhas de grade de mais de uma célula, ele é esticado sobre todas as células em que está localizado.
Tabela de unidades da grade
Use toda a variedade de unidades CSS para criar sua grade. Você pode definir o tamanho das colunas e linhas usando porcentagens, pixels ou frações. Você também pode definir o tamanho mínimo e máximo das colunas e linhas e até mesmo usar cálculos para criar a grade que você precisa.
Observação:
Você pode definir o tamanho das suas linhas e colunas em unidades diferentes. Por definição, as unidades das linhas estão em pixels e as unidades das colunas estão em frações (fr).
Unidade | Tipo de unidade | explicação |
|---|---|---|
Fração (fr) | Fluido | Defina o tamanho das colunas/linhas como uma fração do tamanho da seção/contêiner da página. Por exemplo: em uma grade de 2 colunas, se a coluna da esquerda estiver definida como 2fr e a da direita estiver definida como 1fr, a coluna da esquerda ocupará 2/3 da seção/contêiner. |
Auto | Fluido | A altura e a largura das linhas e colunas são definidas automaticamente para que o conteúdo caiba nelas. |
Porcentagem (%) | Fluido | Defina o tamanho das suas colunas/linhas como uma porcentagem da seção/contêiner. |
Pixels (px) | Fixo | Defina o tamanho das suas colunas/linhas como um número fixo de pixels de tela da seção/contêiner. 1px = 1/96 de 1 polegada. |
Largura da janela (vw) | Janela | Defina o tamanho das suas colunas/linhas como uma porcentagem da largura da janela de visualização (o tamanho da janela do navegador). Por exemplo, se a janela de visualização tiver 50cm de largura, 1vw = 0,5 cm. |
Altura da janela (vh) | Janela | Defina o tamanho das suas colunas/linhas como uma porcentagem da altura da janela de visualização (o tamanho da janela do navegador). Por exemplo, se a janela de visualização tiver 50cm de altura, 1vh = 0,5 cm. |
Mín./Máx. | Outros | Defina o tamanho de suas colunas/linhas para uma medida mínima e máxima. Você pode escolher qualquer uma das unidades de grade ao usar a opção. |
Conteúdo mín. | Outros | Defina o tamanho das suas colunas/linhas para nunca ficarem menores do que esse conteúdo mínimo. |
Conteúdo máx. | Outros | Defina o tamanho das suas colunas/linhas para nunca ficarem maiores do que esse conteúdo máximo. |
Cálculo | Outros | Crie um cálculo usando qualquer uma das unidades de grade para definir o tamanho das colunas/linhas. |
Esse artigo foi útil?
|