Search code examples
htmlcsscss-gridtailwind-css

Sidebar grid with tailwindcss

I'm new with Tailwind, I read the docs and do not understand how gird works!

I need to reach like this shap:

enter image description here

My wrong try:

<div class="grid grid-rows-3 grid-flow-col gap-4">
    <div class="col-span-2 ...">col 1</div>
    <div class="col-span-2 ...">col 2</div>
    <div class="col-span-2 ...">col 3</div>
    <div class="row-span-3 ...">col 4</div>
    <div class="row-span-3 ...">sidebar</div>
</div>
Solution

  • You can remove the col-spans from all cells and add col-end-3 to your 2nd and 4th cells.

    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div class="border">col 1</div>
  <div class="border col-end-3">col 2</div>
  <div class="border">col 3</div>
  <div class="border col-end-3">col 4</div>
  <div class="border row-span-3">sidebar</div>
</div>