Grid

{
  "gridBlock": {
    "blockSchema": {
      "properties": {
        "columns": {
          "title": "Columns",
          "widget": "object_list",
          "schema": {
            "properties": {
              "blocks_layout": {
                "title": "Content",
                "widget": "blocks_layout",
                "defaultBlockType": "slate"
              }
            }
          }
        }
      }
    }
  }
}

{
  "@type": "gridBlock",
  "columns": [
    {
      "@id": "col-1",
      "blocks": {
        "heading-1": {
          "@type": "slate",
          "value": [{"type": "h3", "children": [{"text": "Design"}]}]
        },
        "text-1": {
          "@type": "slate",
          "value": [{"type": "p", "children": [{"text": "We craft beautiful interfaces that users love."}]}]
        }
      },
      "blocks_layout": {
        "items": ["heading-1", "text-1"]
      }
    },
    {
      "@id": "col-2",
      "blocks": {
        "img-1": {
          "@type": "image",
          "url": "https://placehold.co/600x400",
          "alt": "Placeholder"
        }
      },
      "blocks_layout": {
        "items": ["img-1"]
      }
    },
    {
      "@id": "col-3",
      "blocks": {
        "teaser-1": {
          "@type": "teaser",
          "title": "Learn More",
          "description": "Explore the full documentation.",
          "href": [{"@id": "/concepts/architecture"}]
        }
      },
      "blocks_layout": {
        "items": ["teaser-1"]
      }
    }
  ]
}

function GridBlock({ block }) {
  const blocks = block.blocks || {};
  const items = block.blocks_layout?.items || [];

  return (
    <div data-block-uid={block['@uid']} className="grid-block">
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${items.length}, 1fr)`, gap: '1rem' }}>
        {items.map(id => {
          const child = { ...blocks[id], '@uid': id };
          return (
            <div key={id} className="grid-cell">
              <BlockRenderer block={child} />
            </div>
          );
        })}
      </div>
    </div>
  );
}

<template>
  <div :data-block-uid="block['@uid']" class="grid-block">
    <div :style="{ display: 'grid', gridTemplateColumns: `repeat(${items.length}, 1fr)`, gap: '1rem' }">
      <div v-for="id in items" :key="id" class="grid-cell">
        <Block :data="{ ...block.blocks?.[id], '@uid': id }" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({ block: Object });
const items = computed(() => props.block.blocks_layout?.items || []);
</script>

<script>
  import BlockRenderer from './BlockRenderer.svelte';
  export let block;
  $: blocks = block.blocks || {};
  $: items = block.blocks_layout?.items || [];
</script>

<div data-block-uid={block['@uid']} class="grid-block">
  <div style="display: grid; grid-template-columns: repeat({items.length}, 1fr); gap: 1rem">
    {#each items as id (id)}
      <div class="grid-cell">
        <BlockRenderer block={{ ...blocks[id], '@uid': id }} />
      </div>
    {/each}
  </div>
</div>