Grade

O bloco grid dispõe um número fixo de células de formato livre em uma grid CSS. Use-o quando precisar de um layout personalizado de conteúdo, imagens ou outros blocos que não se encaixe em um dos tipos mais estruturados (grade de recursos, tabela de preços, equipe e assim por diante).

Campos

Campo	Descrição	Obrigatório?
heading	Título da seção exibido acima da grade. Exemplo de placeholder: "Featured items".	Não
grid_cols	Número de colunas, selecionado de 1 a 4. O padrão é 2.	Não
grid_gap	Valor de gap CSS entre as células (ex. 1rem). O padrão é 1rem.	Não
cell_count	Número de células a renderizar, selecionado de 1 a 6. O padrão é 4 (ou o número de células existentes).	Não
Cell 1 ... Cell N	Uma caixa de texto livre por célula (N = cell_count). Cada caixa aceita HTML bruto, e seu placeholder indica que você pode aninhar um shortcode como {{block:my-block-name​}} dentro dela.	Não

Segurança de HTML

heading é escapado e renderizado como texto simples. O corpo de cada célula é renderizado sem escape, portanto as células aceitam HTML bruto. Este também é o único tipo de bloco em que o conteúdo de uma célula pode conter ele próprio um shortcode {{block:...​}}: shortcodes de blocos aninhados dentro de uma célula da grade são resolvidos recursivamente no momento do build, permitindo compor outros blocos (um callout, um embed, até outra grade) dentro de uma célula da grade.

Como usar

{{block:homepage-services-grid​}}

Coloque o shortcode no corpo de uma página ou post onde quiser que a grade apareça. Defina grid_cols e grid_gap no editor de administração para controlar o layout; cada célula é editada como sua própria caixa de texto.

Exemplo

Uma seção "Services" de uma página inicial com 3 colunas e 3 células, cada célula contendo um pequeno trecho de HTML escrito à mão:

Campo	Valor
heading	Services
grid_cols	3
grid_gap	1.5rem
cell_count	3
Cell 1	<h3>Consulting</h3><p>Strategy and roadmap work.</p>
Cell 2	<h3>Implementation</h3><p>Hands-on build and migration.</p>
Cell 3	{{block:support-callout​}}

A célula 3 demonstra a capacidade de blocos aninhados: em vez de escrever HTML diretamente, o editor insere um shortcode para um bloco callout existente, que é resolvido e renderizado no lugar quando a página é construída.