title: Tailwind css grid layout
body: <p>I am trying tailwind css for my mini project to achieve below layout with grid.</p>
  <p><strong>My expectations</strong></p>
  <p><a href="https://i.stack.imgur.com/PfWL3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PfWL3.png" alt="enter image description here" /></a></p>
  <p><strong>What I have achieved</strong></p>
  <p><a href="https://i.stack.imgur.com/34on0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/34on0.png" alt="enter image description here" /></a></p>
  <p><strong>Below is my code</strong></p>
  <pre><code>&lt;div id=&quot;main&quot; class=&quot;container grid grid-row-3 grid-flow-col gap-1&quot;&gt;
      &lt;div class=&quot;bg-blue-500 row-span-3&quot;&gt;
          &lt;img class=&quot;object-cover w-full h-full&quot; src=&quot;https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;bg-blue-500 row-span-2&quot;&gt;
          &lt;img class=&quot;object-cover w-full h-full&quot; src=&quot;https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;bg-blue-300&quot;&gt;
          &lt;img class=&quot;object-cover w-full h-full&quot; src=&quot;https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;&quot;&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>