Make grid columns the same height
Hello,
Losing my sanity here with a simple issue. It only happens when there are validation errors. Any ideas?
Tried all of the alignment utilities for both Grid and Flexbox.
(simplified)
<div class="grid grid-cols-12 items-center gap-4">
<div class="col-span-4">
<InputLabel for="a" value="Field A" />
<TextInput class="block w-full" placeholder="Foo" />
<InputError message="Lorem ipsum dolor sit amet." />
</div>
<div class="col-span-4">
<InputLabel for="b" value="Field B" />
<TextInput class="block w-full" placeholder="Foo" />
<InputError message="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, similique." />
</div>
<div class="col-span-4">
<InputLabel for="c" value="Field C" />
<TextInput class="block w-full" placeholder="Foo" />
<InputError message="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, similique." />
</div>
</div>
Here's the InputError component:
<span v-if="message" class="text-sm text-red-600">
{{ message }}
</span>
It's always the simple issues, huh.
Hi, try items-stretch on the grid
<div class="grid grid-cols-12 items-stretch gap-4">
Unfortunately, it makes no difference. I should clarify that the issue is in mobile view. There is no issue in desktop view, even with validation errors and help text.
You are aligning the items in center (not sure why you'd do that in the view that you are showing) and because the error message is shorter on one of the messages it's taking up less space in the div. The divs are the same height, but the content inside them isn't. So you could either remove items-center on the div or set a specific helght on the error message so that the height would be uniform.
https://www.w3schools.com/cssref/playdemo.php?filename=playcss_align-items
Could you try this?
https://play.tailwindcss.com/4kIQXu1yPZ
<div class="grid grid-cols-12 items-start gap-4">
<div class="col-span-4 flex flex-col">
<label for="a" value="Field A" />
<input class="block w-full flex-grow bg-white border shadow-sm border-slate-300 placeholder-slate-400" placeholder="Foo" />
<span class="text-sm text-red-600">Lorem ipsum dolor sit amet.</span>
</div>
<div class="col-span-4 flex flex-col">
<label for="b" value="Field B" />
<input class="block w-full flex-grow bg-white border shadow-sm border-slate-300 placeholder-slate-400" placeholder="Foo" />
<span class="text-sm text-red-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, similique.</span>
</div>
<div class="col-span-4 flex flex-col">
<label for="c" value="Field C" />
<input class="block w-full flex-grow bg-white border shadow-sm border-slate-300 placeholder-slate-400" placeholder="Foo" />
<span class="text-sm text-red-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, similique.</span>
</div>
</div>
Sorry for the late reply.
@robert97 Removing items-center didn't seem to make any difference. I want to avoid setting a specific height. Why was the items-center there in the first place? No idea, was probably left over from some other component that I copied.
@whoami Your solution seemed to work fine, but I really don't like that I need to mix Flex with Grid, I guess it's a solution for now. I'll mark it as the best answer for now.
I'll circle back to this in the near future. I'm sure the issue lies elsewhere. I guess the sample code wasn't that useful after all because it's actually quite stripped down and isn't a 1:1 match. There's heavy use of components going on. If I still can't figure it out after I have circled back, I'll share the full components with greater detail, which is what I probably should have done in the first place.