Gallery

Sections gallery

An image gallery grid.

Markup

Drops in as data-pb-block="gallery".

html

<section data-pb-block="gallery" class="pb-gallery" style="padding:4rem 1.5rem;">
  <div class="pb-gallery__grid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:64rem;margin:0 auto;">
    <img src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='300'%3E%3Crect%20width='400'%20height='300'%20fill='%23e2e8f0'/%3E%3C/svg%3E" alt="" style="width:100%;border-radius:0.5rem;">
    <img src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='300'%3E%3Crect%20width='400'%20height='300'%20fill='%23e2e8f0'/%3E%3C/svg%3E" alt="" style="width:100%;border-radius:0.5rem;">
    <img src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='300'%3E%3Crect%20width='400'%20height='300'%20fill='%23e2e8f0'/%3E%3C/svg%3E" alt="" style="width:100%;border-radius:0.5rem;">
  </div>
</section>

Settings

Everything a block can be configured to do:

Bind to State: Drive content reactively from a State with declarative Alpine — x-text, x-show or x-model over $store.app.<stateKey>.
On event → run a Flow: Wire an interaction to a Flow: set data-pb-flow="<slug>" and data-pb-flow-event="click|submit|hover|change|…". The flow's returned actions update the page.
Link to a page: Navigate to another published page on click with data-pb-page="<slug>".
Styles & classes: Edit spacing, colour and layout visually in the GrapesJS editor. The wrapper carries data-pb-block="gallery" so it imports as a labelled, editable component.