Specifying grid column/row size in tailwindcss

Question

I would like to create a grid with tailwind css where the first column is very narrow and the second one is very wide. Normally I find the tailwind docs very intuitive but I'm not understanding this one. Using grid-cols-{n} I can create equally sized columns but I don't understand how to make differently sized columns. How can I go about this?

Answer 1

Here's an example of a 2 column grid where the first column is narrow, and the second one is not:

<div class="grid grid-cols-[max-content_1fr] gap-x-4">
  <div class="bg-red-200 p-4">Column 1</div>
  <div class="bg-green-200 p-4">Column 2</div>
</div>

Tailwind play: https://play.tailwindcss.com/FTLi83L5zI

I'll assume that's not what you want as it's not 100% clear from your question. So here's a different example using a 12 column grid, you can span multiple columns to achieve something along the lines of what you are asking for:

  <div class="grid grid-cols-12 gap-x-4 text-center">
    <div class="bg-slate-400 p-4">Col</div>
    <div class="bg-slate-400 p-4 col-span-2">Col</div>
    <div class="bg-slate-400 p-4">Col</div>
    <div class="bg-slate-400 p-4">Col</div>
    <div class="bg-slate-400 p-4">Col</div>
    <div class="bg-slate-400 p-4 col-span-4">Col</div>
    <div class="bg-slate-400 p-4">Col</div>
    <div class="bg-slate-400 p-4">Col</div>
  </div>

Tailwind play: https://play.tailwindcss.com/XtUOu2cDD9

Finally, you could also do this:

<div class="grid grid-cols-12 gap-x-4 text-center">
  <div class="bg-slate-400 p-4 col-span-4">Col</div>
  <div class="bg-slate-400 p-4 col-span-8">Col</div>
</div>

Tailwind play: https://play.tailwindcss.com/bAnPhCdNfc

Further examples: arbitrary values with Tailwind

Answer 2

If you want create columns with different widths then it will be an implicitly-created grid.

<div class="p-5 bg-slate-200">
  <div class="grid grid-flow-col auto-cols-max gap-x-5">
    <div class="bg-white w-20">Hello 1</div>
    <div class="bg-white w-40">Hello 2</div>
    <div class="bg-white">Hello 3</div>
  </div>
</div>

https://play.tailwindcss.com/7XjBZDzwml

This is the relevant documentation here: https://tailwindcss.com/docs/grid-auto-columns

And it explains how you can customize your theme if needed too.