Kevin Powell - Community•3mo ago

Grid alignment inconsistency

Hello. I have 4 cards in a grid. As you can see in the image, the 2nd one got a little bigger due to the extra line. To remove the consistency, I am hoping to make other cards extend as well but I am unable to. Please guide me. Code:

function PeoplesGrid() {
    const peoplesData: PeopleData[] = [ ... ];

    return (
        <div className="grid grid-cols-4 gap-3 mt-18">
            {peoplesData.map((person) => (
                <div key={person.title} className="flex flex-col">
                    <img src={person.image} alt="" />

                    <div className="bg-neutral-950 flex gap-x-4 p-5">
                        <img src={person.icon} alt="" className="size-7" />
                        <div>
                            <p className="text-lg font-medium text-white">{person.title}</p>
                            <p className="text-neutral-400 mt-1">{person.description}</p>
                        </div>
                    </div>
                </div>
            ))}
        </div>
    );
}

function PeoplesGrid() {
    const peoplesData: PeopleData[] = [ ... ];

    return (
        <div className="grid grid-cols-4 gap-3 mt-18">
            {peoplesData.map((person) => (
                <div key={person.title} className="flex flex-col">
                    <img src={person.image} alt="" />

                    <div className="bg-neutral-950 flex gap-x-4 p-5">
                        <img src={person.icon} alt="" className="size-7" />
                        <div>
                            <p className="text-lg font-medium text-white">{person.title}</p>
                            <p className="text-neutral-400 mt-1">{person.description}</p>
                        </div>
                    </div>
                </div>
            ))}
        </div>
    );
}

16 Replies

ἔρως•3mo ago

you have to do the tailwind equivalent of grid-template-rows: 1fr

ShayokhOP•3mo ago

You mean grid-rows-1?

.grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
}

.grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
}

ἔρως•3mo ago

i have absolutely no idea but looks like it

ShayokhOP•3mo ago

Nope same result

ἔρως•3mo ago

where did you put it?

ShayokhOP•3mo ago

<div className="grid grid-cols-4 gap-3 mt-18"> Here

ἔρως•3mo ago

and which element has the background?

ShayokhOP•3mo ago

Background? This is the code

ἔρως•3mo ago

yes, the black background

ShayokhOP•3mo ago

<div className="bg-neutral-950 flex gap-x-4 p-5"> Right below the image

ἔρως•3mo ago

how about you set it on the parent? on the first div inside the map?

ShayokhOP•3mo ago

Never mind

flex-1

flex-1

did the job

ἔρως•3mo ago

where?

ShayokhOP•3mo ago

ShayokhOP•3mo ago

ἔρως•3mo ago

now the question is "why it works?" 🤔

Gaming

Programming

Grid alignment inconsistency

Did you find this page helpful?