How to keep individual grid column height in tailwind?

by raphael_tillman , in category: HTML & CSS , 7 months ago

How to keep individual grid column height in tailwind?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by shyann , 7 months ago

@raphael_tillman 

To keep individual grid column height in Tailwind, you can use the h-{value} utility class to set the height of each column individually. Here's an example:

1
2
3
4
5
<div class="grid grid-cols-3 gap-4">
  <div class="h-32 bg-gray-200">Column 1</div>
  <div class="h-24 bg-gray-300">Column 2</div>
  <div class="h-40 bg-gray-400">Column 3</div>
</div>


In this example, each grid column has a different height set using the h-{value} utility class. You can adjust the height value to fit your design needs.