Editor do Wix Studio: sobre células e grades

As grades são uma ferramenta muito útil quando falamos sobre design responsivo. A grade é composta por células e cada elemento, ou grupo de elementos, tem sua própria célula. Isso mantém seu layout no lugar em todos os tamanhos de tela, garantindo que os elementos não se sobreponham. 

Você pode adicionar células para organizar uma seção ou aplicar uma grade CSS avançada para um controle mais preciso. A grade CSS também está disponível para elementos como contêineres e itens do repetidor que não podem ser divididos em células.

No Editor do Wix Studio, as seções vêm com uma grade integrada, contendo uma única célula (abrigando toda a seção). Divida o layout da seção em mais células para dar uma estrutura responsiva ao conteúdo. Existem vários layouts personalizáveis para você escolher.

Depois de escolher o layout relevante, ajuste-o como desejar ao adicionar novas células ou dividir as existentes. Para ajustar o tamanho de cada célula, basta arrastar as linhas de grade na tela.

Precisa de um controle mais preciso da grade da seção? Mude para uma grade CSS avançada para ajustar as linhas, colunas e seu tamanho com medidas avançadas (por exemplo: fr, mín/máx, %). Você pode adaptar essas configurações por breakpoint para que a grade faça sentido em todos os tamanhos de tela.

Aplique uma grade CSS avançada em uma seção inteira ou apenas em uma célula específica. Essa também é uma maneira de adicionar uma grade a elementos que não sejam seções, como um contêiner ou um item do repetidor. Se a opção estiver disponível, você pode encontrá-la na seção Layout no painel Inspetor.

Clique nas perguntas abaixo para saber mais sobre grades no Editor do Wix Studio.