0

I have a grid with 3 columns. I want item B to be the same height as item A but Item A hasn't got a fixed height (depending on the content). I am using TailwindCSS in a Nuxt app. The margin mb-4 doesn't seem to be applied for Item B. How do I do that ??

enter image description here

<div class="grid grid-cols-3"/>
  <div class="mb-4">Item A</div>
  <div class="mb-4">Item A</div>
  <div class="mb-4 h-full">Item B</div>     
</div>
kissu
  • 40,416
  • 14
  • 65
  • 133
Maxime
  • 337
  • 2
  • 17
  • 1
    With a quick Google search, you can find this: https://stackoverflow.com/questions/44488357/equal-height-rows-in-css-grid-layout Then setting `auto-rows-auto` in the parent should do it: https://tailwindcss.com/docs/grid-auto-rows – kissu Oct 20 '21 at 18:15
  • Thank you for that. But I don't want all the rows the same height, I only want the item A to impose the height to Item B. Item B being a list you can scroll down, if I don't impose a height to that element it will be very long. I think I might need to write a javascript function which output the height of Item A and use it to determine the height of Item B. – Maxime Oct 21 '21 at 10:42

0 Answers0