---
title: "Grid"
description: "Grid layout for content."
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-grid"
---

{% set grid_item_1 %}
    <h2>Item 1</h2>
    <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada tellus velit, in fringilla turpis interdum aliquet. Donec eget neque sit amet orci gravida eleifend. Fusce aliquet <a href="https://www.example.com/" target="_blank">tempus gravida.</a></p>
{% endset %}

{% set grid_item_2 %}
    <twig:block-image
        title="What is Twig?"
        image="/img/home/derafu-dev-programmer.png"
        content="<p>A small branch.</p>"
        :buttons="[
            {
                text: 'Learn about Twig',
                url: 'https://twig.symfony.com/'
            }
        ]"
    />
{% endset %}

{% set grid_item_3 %}
    <twig:block-image
        title="Lorem ipsum"
        image="/img/home/derafu-dev-programmer.png"
        content="<p>Dolor sit amet</p>"
        :buttons="[
            {
                text: 'Consectetur',
                url: 'https://twig.symfony.com/'
            }
        ]"
    />
{% endset %}

{# Example 1: Grid without specified columns #}
<twig:block-grid
    class="my-4"
    :items="[
        grid_item_1,
        grid_item_2,
    ]"
/>

{# Example 2: Grid with 4 columns #}
<twig:block-grid
    class="my-4"
    cols="4"
    :items="[
        grid_item_1,
        grid_item_2,
        grid_item_3,
        grid_item_2,
    ]"
/>



---
Last updated on 09/09/2026