I want a responsive grid layout where the number of columns changes dynamically based on screen size, and if there are fewer items than columns, the grid items should be centered. So they are not on aligned on the left side. Any idea how to solve that?

I am using tailwind in a nextjs project and this are my classes so far:

px-2.5 grid grid-cols-1 mobile:grid-cols-2 tablet:grid-cols-3 laptop:grid-cols-4 desktop:grid-cols-5 gap-y-12 gap-x-1 w-full font-lrg font-medium flex-1 bg-white