Standard grid
The minimum values required will normally be the number of columns, grid-gap and the outer padding of the grid container.
With tailwindcss we set grid-rows-none so the height of each row is independant of other rows.
This pattern will set up a flexible grid that will stretch to the full width of the browser.
<div className="grid grid-cols-1 grid-rows-none px-5 xl:px-8 2xl:px-36 md:grid-cols-12 md:gap-x-4 xl:grid-cols-12">
</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.
<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>
tailwindcss.com/docs/grid-auto-columns
developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns
Custom column configuration
One fixed width column and the other is set to take the remaining width.
Add to Tailwind config.
extend: {
gridTemplateColumns: {
// Custom column configuration
'give-away': '13rem 1fr',
}
},
Then use as follows:
<div class="grid-cols-give-away grid gap-x-5">
<div class="bg-slate-300">1</div>
<div class="bg-slate-300">2</div>
</div>