Kevin Powell - Community•3mo ago

Grid is expanding to fit the image. want grid to only expand to fit the content and image to shrnk.

<div
    key={i}
    className="grid grid-cols-3"
>
    <p> {data.description} </p>
    <div>
        <img
            src={imagePaths[i]}
            className={ 'w-full' }
        />
    </div>
</div>

<div
    key={i}
    className="grid grid-cols-3"
>
    <p> {data.description} </p>
    <div>
        <img
            src={imagePaths[i]}
            className={ 'w-full' }
        />
    </div>
</div>

the grid row would expand to fit the image but I'd rather expand it to only fit the content. Basically I don't want the row height to depend on the image.

1 Reply

o_O•3mo ago

Had a great idea. I set the image to absolute and inset to 0. the image container div gets a position of relative. This solves the issue.

<div
    key={i}
    className="grid grid-cols-3"
>
    <p> {data.description} </p>
    <div className='relative'>
        <img
            src={imagePaths[i]}
            className={ 'absolute inset-0 object-cover h-full' }
        />
    </div>
</div>

<div
    key={i}
    className="grid grid-cols-3"
>
    <p> {data.description} </p>
    <div className='relative'>
        <img
            src={imagePaths[i]}
            className={ 'absolute inset-0 object-cover h-full' }
        />
    </div>
</div>

Gaming

Programming

Grid is expanding to fit the image. want grid to only expand to fit the content and image to shrnk.