Coming from a bootstrap background and trying to learn Tailwind.

In bootstrap we can do

<div class="row">
   <div class="col-4">1 Column</div>
   <div class="col-4">2 Column</div>
   <div class="col-4">3 Column</div>
</div>

And we’d get a traditional table like display with the 3 columns spanning across the screen.

But I’ve been trying the below Tailwind code and it only stacks the columns on top of each other.

<div class="w-full mx-auto">
    <div class="grid grid-cols-12 gap-1">
        <div class="col-span-4">Column</div>
        <div class="col-span-4">Column</div>
        <div class="col-span-4">Column</div>
    </div>
</div>

Any idea what I’m doing wrong?