Using ChatGPT for Web Development

I just used ChatGPT for the first time for anything real – and I can immediate see that I’m going to be doing this again. I was, as I do normally, struggling with front end web development – mainly I’m a back end developer. I had a div where I needed to use TailWind to along a group of columns correctly. And, try as I might, I couldn’t get the grid to display in a compact fashion – it would only expand to the full width of the containing div.

I started with these google searches:

tailwind grid examples
make tailwind grid more compact

Frustrated with Google and reading web pages, I headed over to ChatGPT and gave it these two prompts:

How do I make a tailwindcss grid not fill the full width
how can a tailwind css grid not expand to the full width

ChatGPT then gave me this text:

In order to make a grid using Tailwind CSS not fill the full width of its container, you can use the w- utility class to set a specific width for the grid. For example, if you want the grid to be 600px wide, you can use the class w-6/12 which is equivalent to 50%. You can also use w-1/2 for the same effect.

Alternatively, you can use the max-w- utility class to set a maximum width for the grid. For example, if you want the grid to be no wider than 600px, you can use the class max-w-6/12 or max-w-1/2.

You can also use the m-auto class to center the grid inside its container.

In addition to that you can use the grid-cols- utility class to set the number of columns in the grid.

and this example:

<div class="grid grid-cols-3 w-1/2 m-auto">
    <div class="col-span-1">Column 1</div>
    <div class="col-span-1">Column 2</div>
    <div class="col-span-1">Column 3</div>
</div>

I moved over the w-1/2 class name to my code and it instantly went from filling the containing div to left justified and only a minimal width – this was exactly my goal.

I played around with adding text-center in a few places to get it centered and, alas, failed. My final solution was to move over the m-auto class name and then, voila! I got exactly what I had been looking for.

Conclusion

My experience with ChatGPT reminded me very, very much of having a co-worker in the next cubicle to whom I could ask a question. If you’re a web developer and you haven’t tried using ChatGPT, I strongly recommend it.