I’m creating a grid with tailwind CSS but I’m stuck with resizing the grid division. Below is the code I have tried.

<div class="grid grid-col-2 gap-1">
<span class="bg-green-500">Item 1 </span>
<span class="bg-green-500">Item 2 </span>
</div>

This will result like this and that’s fine for me what I want is that the Item 1 col should be 50px and Item 2 col should be auto width.

>Solution :

<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-[50px_auto] gap-1">
<span class="bg-green-500">Item 1 </span>
<span class="bg-green-500">Item 2 </span>
</div>

Try this code

And there is a typo in your code instead of grid-col it should be grid-cols