search

tailwindlabs / discuss

A place to ask questions, get help, or share what you've built with Tailwind CSS.
MIT License
171 stars 9 forks source link

Grid layout - Card within main section #443

Open MartijnHarmenzon opened 4 years ago

MartijnHarmenzon commented 4 years ago

I am trying to insert a card within a grid column. Somehow it is not doing anything with padding. I would like to fit the card nicely within the main section. So looking like a card wthin the main section. Any suggestions?

image

Code I am using:

  <div class="grid grid-cols-12 grid-rows-3 gap-2 h-64">
    <nav class="row-span-3 col-span-1 bg-gray-600">
      Nav...
    </nav>

    <main class="row-span-3 col-span-8 bg-gray-500">
      <div class="bg-green-100 border border-black rounded shadow text-center uppercase p-4 h-full">
        Card1
      </div>
    </main>

    <aside class="row-span-1 col-span-3 bg-gray-400">
      Aside...
    </aside>

    <aside class="row-span-2 col-span-3 bg-gray-400">
      Aside...
    </aside>
  </div>