Net7 UI Kit

Grids 

<div class="grid gap-6 p-4">
    <div>
        <h1 class="text-2xl font-bold">Grid classes demo</h1>
        <p>base demo grid using Tailwind grid columns classes.</p>
        <p>This demo is not responsive-ready: grids should be responsive as needed managing column classes, with Tailwind breakpoints eg md:grid-cols-2 lg:grid-cols-3 etc
        </p>
    </div>

    <div class="grid grid-cols-2 gap-6 p-4">

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

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

    </div>

    <div class="grid grid-cols-3 gap-6 p-4">

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

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

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

    </div>

    <div class="grid grid-cols-4 gap-6 p-4">

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

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

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

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

    </div>

    <div class="grid grid-cols-6 gap-6 p-4">

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

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

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

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

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

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

    </div>

    <div class="grid grid-cols-8 gap-6 p-4">

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

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

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

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

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

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

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

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

    </div>

    <div class="grid grid-cols-10 gap-6 p-4">

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

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

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

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

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

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

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

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

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

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

    </div>

    <div class="grid grid-cols-12 gap-6 p-4">

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

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

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

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

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

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

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

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

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

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

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

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

    </div>

</div>
 
<div class="grid gap-6 p-4">
    <div>
        <h1 class="text-2xl font-bold">Grid classes demo</h1>
        <p>base demo grid using Tailwind grid columns classes.</p>
        <p>This demo is not responsive-ready: grids should be responsive as needed managing column classes, with Tailwind breakpoints eg md:grid-cols-2 lg:grid-cols-3 etc
        </p>
    </div>
    {% for grid in grids %}
    <div class="grid {{grid.columns}} gap-6 p-4">
        {% for i in range(0, grid.count) %}
        <div class="p-2 bg-primary-100 grid justify-center items-center text-sm font-bold">grid-cols-{{ grid.count }}</div>
        {% endfor %}
    </div>
    {% endfor %}
</div>
 
{
  "grids": [
    {
      "columns": "grid-cols-2",
      "count": 2
    },
    {
      "columns": "grid-cols-3",
      "count": 3
    },
    {
      "columns": "grid-cols-4",
      "count": 4
    },
    {
      "columns": "grid-cols-6",
      "count": 6
    },
    {
      "columns": "grid-cols-8",
      "count": 8
    },
    {
      "columns": "grid-cols-10",
      "count": 10
    },
    {
      "columns": "grid-cols-12",
      "count": 12
    }
  ]
}

Grid system based on Tailwind grid utilities. Here is shown a base demo grid using Tailwind grid columns classes. This demo is not responsive-ready: grids should be responsive as needed managing column classes, with Tailwind breakpoints eg md:grid-cols-2 lg:grid-cols-3 etc

Use Tailwind Grid utilities documentation for help: