See also Tailwind CSS Grid
One column grid
A full width section with its own background colour that has a fixed width so the component is centered on the screen.
Here we use the container class to set the max-width of the element based on the current breakpoint.
<div class="bg-slate-300">
<div class="container mx-auto px-5">
CONTENT
</div>
</div>
Implicit grid
When you need columns of varying widths you can create an implicit grid, the key class here being auto-cols-min. You also need to include a col-start-{n} class for each column that you want.
auto-cols-min results in grid-auto-columns: min-content;
<div class="grid auto-cols-min gap-2 bg-zinc-500 p-5">
<div class="col-start-1 w-20 bg-zinc-100 p-5">col 1</div>
<div class="col-start-2 w-40 bg-zinc-100 p-5">col 2</div>
<div class="col-start-3 w-24 bg-zinc-100 p-5">col 3</div>
<div class="col-start-4 w-48 bg-zinc-100 p-5">col 4</div>
</div>
Demo of above: https://play.tailwindcss.com/gKRtn7vFgi?layout=horizontal
More info:
https://tailwindcss.com/docs/grid-auto-columns
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns
Resources
Learn CSS Grid with Wes Bos