OffHealth component library

Grids 

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

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

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

    </div>

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

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

    </div>

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

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

    </div>

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

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

    </div>

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

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

    </div>

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

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

    </div>

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

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

        <div class="h-5 bg-gray-800"></div>

    </div>

</div>
 
<div class="grid gap-6 p-4">
    {% for grid in grids %}
    <div class="grid grid-cols-{{grid.columns}} gap-6 p-4">
        {% for i in  range(0, grid.count) %}
        <div class="h-5 bg-gray-800"></div>
        {% endfor %}
    </div>
    {% endfor %}
</div>
 
{
  "grids": [
    {
      "columns": 2,
      "count": 2
    },
    {
      "columns": 3,
      "count": 3
    },
    {
      "columns": 4,
      "count": 4
    },
    {
      "columns": 6,
      "count": 6
    },
    {
      "columns": 8,
      "count": 8
    },
    {
      "columns": 10,
      "count": 10
    },
    {
      "columns": 12,
      "count": 12
    }
  ]
}

Grid system