title: Youtube Layout with CSS Grid (Tailwind)
body: <p>I know your all busy, and any time you give me I value highly and would be greatly appreciated.</p>
  <p>I'm trying to create a Youtube like layout with the video player, a sidebar and comments underneath the video. I'm trying to use a grid with Tailwind CSS, but the comment section (3 and 4) aren't going underneath the video player (1). This is the desktop layout I was thinking:
  <a href="https://i.stack.imgur.com/wtgQY.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>The order when in mobile should be video, sidebar then comments.</p>
  <p>Heres my code so far:</p>
  <pre><code>&lt;div class=&quot;container mx-auto&quot;&gt;
      &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-6&quot;&gt;
          &lt;div class=&quot;flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100 col-end-auto md:col-span-8&quot; style=&quot;height: 200px;&quot;&gt;1&lt;/div&gt;
          &lt;div class=&quot;flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100 col-end-auto md:col-span-4&quot; style=&quot;height: 400px;&quot;&gt;2&lt;/div&gt;
          &lt;div class=&quot;flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100 col-end-auto md:col-span-4&quot;&gt;3&lt;/div&gt;
          &lt;div class=&quot;flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100 col-end-auto md:col-span-4&quot;&gt;4&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I'm very great full for any help.</p>