---
title: "Video Grid"
description: "Grid layout for multiple videos."
type: "docs"
category: "doc"
tags: []
authors: [Anonymous]
date: "2026-09-09"
last_update: "2026-09-09"
time_minutes: 1
draft: false
unlisted: false
url: "https://www.derafu.dev/docs/ui/twig/components/block-video-grid"
---

<twig:block-video-grid
    class="my-4"
    :cols="3"
    :videos="[
        {
            video: 'https://www.youtube.com/watch?v=GOAEIMx39-w',
            title: 'Lorem ipsum',
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore <a href=\'https://www.example.com/\' target=\'_blank\'>magna aliqua.</a>',
            buttonText: 'Learn more',
            buttonUrl: '#'
        },
        {
            video: 'https://www.youtube.com/watch?v=GOAEIMx39-w',
            title: 'Lorem ipsum',
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
            buttonText: 'Learn more',
            buttonUrl: ''
        },
        {
            video: 'https://www.youtube.com/watch?v=GOAEIMx39-w',
            title: 'Lorem ipsum',
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
            buttonText: 'Learn more',
            buttonUrl: '#'
        }
    ]"
/>

<twig:block-video-grid
    class="my-4"
    :cols="2"
    :videos="[
        {
            video: 'https://www.youtube.com/watch?v=GOAEIMx39-w'
        },
        {
            video: 'https://www.youtube.com/watch?v=GOAEIMx39-w'
        }
    ]"
/>

<twig:block-video-grid
    class="my-4"
    :cols="1"
    :videos="[
        {
            video: 'https://www.youtube.com/watch?v=GOAEIMx39-w'
        }
    ]"
/>



---
Last updated on 09/09/2026