title: Centering elements in a grid layout in Tailwind
body: <p>I'm struggling to get a grid layout centered in Tailwind. Here's an example</p>
  <pre><code>    &lt;div class=&quot;grid grid-cols-6 p-24 justify-center bg-slate-500&quot;&gt;
          &lt;div class=&quot;w-full p-8 col-span-2 justify-center justify-self-center mx-auto bg-slate-900 text-white text-center text-lg&quot;&gt;
              2 cols, should be centered
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>And here's what that looks like:</p>
  <p><a href="https://i.stack.imgur.com/kKTl0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kKTl0.png" alt="enter image description here" /></a></p>
  <p>Of course I could add col-start-2 and then it would be centered, but the grid is coming from a dynamic layout and I don't know whether there are more elements coming on the same row or not. I've tried justify-center, justify-self-center, mx-auto, also played around with no-float but nothing works.</p>
  <p>Does anyone have any ideas?</p>