Regione Toscana Design System

Grids 

<div class="rtds-grid rtds-gap-8 rtds-p-4">
    <div>
        <h1 class="rtds-text-2xl rtds-font-bold">Grid classes demo</h1>

        <p>Base demo grid using Tailwind grid columns classes.</p>
        <p>Grids should be responsive as needed managing column classes, with Tailwind breakpoints eg md:rtds-grid-cols-2 lg:rtds-grid-cols-3 etc
        </p>
        <p>In the markup below, for each grid cols is shown responsive classes for managing specific cols count at each breakpoint</p>
    </div>

    <div>
        <h2 class="rtds-text-lg rtds-font-bold">Grid 2 with full responsive classes</h2>
        <div class="rtds-grid rtds-grid-cols-2 xs:rtds-grid-cols-2 sm:rtds-grid-cols-2 md:rtds-grid-cols-2 lg:rtds-grid-cols-2 xl:rtds-grid-cols-2 2xl:rtds-grid-cols-2 3xl:rtds-grid-cols-2 rtds-gap-6 rtds-p-4">

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-2</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-2</div>

        </div>
    </div>

    <div>
        <h2 class="rtds-text-lg rtds-font-bold">Grid 3 with full responsive classes</h2>
        <div class="rtds-grid rtds-grid-cols-3 xs:rtds-grid-cols-3 sm:rtds-grid-cols-3 md:rtds-grid-cols-3 lg:rtds-grid-cols-3 xl:rtds-grid-cols-3 2xl:rtds-grid-cols-3 3xl:rtds-grid-cols-3 rtds-gap-6 rtds-p-4">

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-3</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-3</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-3</div>

        </div>
    </div>

    <div>
        <h2 class="rtds-text-lg rtds-font-bold">Grid 4 with full responsive classes</h2>
        <div class="rtds-grid rtds-grid-cols-4 xs:rtds-grid-cols-4 sm:rtds-grid-cols-4 md:rtds-grid-cols-4 lg:rtds-grid-cols-4 xl:rtds-grid-cols-4 2xl:rtds-grid-cols-4 3xl:rtds-grid-cols-4 rtds-gap-6 rtds-p-4">

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-4</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-4</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-4</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-4</div>

        </div>
    </div>

    <div>
        <h2 class="rtds-text-lg rtds-font-bold">Grid 6 with full responsive classes</h2>
        <div class="rtds-grid rtds-grid-cols-6 xs:rtds-grid-cols-6 sm:rtds-grid-cols-6 md:rtds-grid-cols-6  lg:rtds-grid-cols-6 xl:rtds-grid-cols-6 2xl:rtds-grid-cols-6 3xl:rtds-grid-cols-6 rtds-gap-6 rtds-p-4">

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-6</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-6</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-6</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-6</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-6</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-6</div>

        </div>
    </div>

    <div>
        <h2 class="rtds-text-lg rtds-font-bold">Grid 8 with full responsive classes</h2>
        <div class="rtds-grid rtds-grid-cols-8 xs:rtds-grid-cols-8 sm:rtds-grid-cols-8 md:rtds-grid-cols-8 lg:rtds-grid-cols-8 xl:rtds-grid-cols-8 2xl:rtds-grid-cols-8 3xl:rtds-grid-cols-8 rtds-gap-6 rtds-p-4">

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-8</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-8</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-8</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-8</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-8</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-8</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-8</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-8</div>

        </div>
    </div>

    <div>
        <h2 class="rtds-text-lg rtds-font-bold">Grid 10 with full responsive classes</h2>
        <div class="rtds-grid rtds-grid-cols-10 xs:rtds-grid-cols-10 sm:rtds-grid-cols-10 md:rtds-grid-cols-10 lg:rtds-grid-cols-10 xl:rtds-grid-cols-10 2xl:rtds-grid-cols-10 3xl:rtds-grid-cols-10 rtds-gap-6 rtds-p-4">

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-10</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-10</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-10</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-10</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-10</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-10</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-10</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-10</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-10</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-10</div>

        </div>
    </div>

    <div>
        <h2 class="rtds-text-lg rtds-font-bold">Grid 12 with full responsive classes</h2>
        <div class="rtds-grid rtds-grid-cols-12 xs:rtds-grid-cols-12 sm:rtds-grid-cols-12 md:rtds-grid-cols-12 lg:rtds-grid-cols-12 xl:rtds-grid-cols-12 2xl:rtds-grid-cols-12 3xl:rtds-grid-cols-12 rtds-gap-6 rtds-p-4">

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-12</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-12</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-12</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-12</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-12</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-12</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-12</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-12</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-12</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-12</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-12</div>

            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-12</div>

        </div>
    </div>

</div>
 
<div class="rtds-grid rtds-gap-8 rtds-p-4">
    <div>
        <h1 class="rtds-text-2xl rtds-font-bold">Grid classes demo</h1>

        <p>Base demo grid using Tailwind grid columns classes.</p>
        <p>Grids should be responsive as needed managing column classes, with Tailwind breakpoints eg md:rtds-grid-cols-2 lg:rtds-grid-cols-3 etc
        </p>
        <p>In the markup below, for each grid cols is shown responsive classes for managing specific cols count at each breakpoint</p>
    </div>
    {% for grid in grids %}
    <div>
        <h2 class="rtds-text-lg rtds-font-bold">Grid {{ grid.count }} with full responsive classes</h2>
        <div class="rtds-grid {{grid.columns}} rtds-gap-6 rtds-p-4">
            {% for i in range(0, grid.count) %}
            <div class="rtds-p-2 rtds-bg-primary-100 rtds-grid rtds-justify-center rtds-items-center rtds-text-sm rtds-font-bold">cols-{{ grid.count }}</div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>
 
{
  "grids": [
    {
      "columns": "rtds-grid-cols-2 xs:rtds-grid-cols-2 sm:rtds-grid-cols-2 md:rtds-grid-cols-2 lg:rtds-grid-cols-2 xl:rtds-grid-cols-2 2xl:rtds-grid-cols-2 3xl:rtds-grid-cols-2",
      "count": 2
    },
    {
      "columns": "rtds-grid-cols-3 xs:rtds-grid-cols-3 sm:rtds-grid-cols-3 md:rtds-grid-cols-3 lg:rtds-grid-cols-3 xl:rtds-grid-cols-3 2xl:rtds-grid-cols-3 3xl:rtds-grid-cols-3",
      "count": 3
    },
    {
      "columns": "rtds-grid-cols-4 xs:rtds-grid-cols-4 sm:rtds-grid-cols-4 md:rtds-grid-cols-4 lg:rtds-grid-cols-4 xl:rtds-grid-cols-4 2xl:rtds-grid-cols-4 3xl:rtds-grid-cols-4",
      "count": 4
    },
    {
      "columns": "rtds-grid-cols-6 xs:rtds-grid-cols-6 sm:rtds-grid-cols-6 md:rtds-grid-cols-6  lg:rtds-grid-cols-6 xl:rtds-grid-cols-6 2xl:rtds-grid-cols-6 3xl:rtds-grid-cols-6",
      "count": 6
    },
    {
      "columns": "rtds-grid-cols-8 xs:rtds-grid-cols-8 sm:rtds-grid-cols-8 md:rtds-grid-cols-8 lg:rtds-grid-cols-8 xl:rtds-grid-cols-8 2xl:rtds-grid-cols-8 3xl:rtds-grid-cols-8",
      "count": 8
    },
    {
      "columns": "rtds-grid-cols-10 xs:rtds-grid-cols-10 sm:rtds-grid-cols-10 md:rtds-grid-cols-10 lg:rtds-grid-cols-10 xl:rtds-grid-cols-10 2xl:rtds-grid-cols-10 3xl:rtds-grid-cols-10",
      "count": 10
    },
    {
      "columns": "rtds-grid-cols-12 xs:rtds-grid-cols-12 sm:rtds-grid-cols-12 md:rtds-grid-cols-12 lg:rtds-grid-cols-12 xl:rtds-grid-cols-12 2xl:rtds-grid-cols-12 3xl:rtds-grid-cols-12",
      "count": 12
    }
  ]
}

Grid System

Sistema di griglia basato sulle utility grid di Tailwind.

Panoramica

Questo componente mostra una griglia di base utilizzando le classi di colonne grid di Tailwind. Questa demo non è responsive-ready: le griglie dovrebbero essere responsive secondo necessità, gestendo le classi delle colonne con i breakpoint di Tailwind (es. md:grid-cols-2 lg:grid-cols-3 ecc.).

Documentazione di Riferimento

Per ulteriore assistenza, consultare la documentazione delle utility Grid di Tailwind: