CODEWITHSUNDEEP
csstailwind-css
VUELOVER
VUELOVER

Reputation: 83

How to set the different height of columns in a grid?

I'm using Tailwind CSS for my project. I'm stuck with a minor problem. I have a 3-column grid and I want to set different heights for each column.

I have tried this code

    <div class="grid grid-cols-3 grid-rows-2 gap-2">
    <div class="bg-green-200 col-span-full h-auto">Box1</div>
    <div class="bg-white rounded-md shadow-sm h-[40px]">Box2</div>
    <div class="bg-white rounded-md shadow-sm h-auto">Box3</div>
    <div class="bg-white rounded-md shadow-sm h-[250px]">Box4</div>
    </div>

In the above code when I set the height to a specific item within the grid it applies to all remaining items for example if I set h-10 to Box1 it will be applied to all remaining boxes.

Here is what I'm looking for, I want to set these specific heights -

Box1 - h-auto

Box2 - h-[40px]

Box3 - h-auto

Box4 - h-[250px]

Upvotes: 1

Views: 1710

Answers (1)

krishnaacharyaa
krishnaacharyaa

Reputation: 24912

From your question,

when I set the height to a specific item within the grid it applies to all remaining items for example if I set h-10 to Box1 it will be applied to all remaining boxes.

But ,in the following code I have changed the height of Box1 to h-10 , which is not changing any div's height!

<div class="grid grid-cols-3 grid-rows-2 gap-2">
  <div class="col-span-full h-10 bg-green-200">Box1</div>
  <div class="h-[40px] rounded-md bg-blue-500 shadow-sm">Box2</div>
  <div class="h-auto rounded-md bg-orange-400 shadow-sm">Box3</div>
  <div class="h-[250px] rounded-md bg-amber-200 shadow-sm">Box4</div>
</div>

Before

Box1 => h-auto

enter image description here

After

Box1 => h-10

enter image description here

What are you actually looking for ? Can you be precise.

Upvotes: 2

Related Questions