CODEWITHSUNDEEP
csstailwind-css
frenchqwerty
frenchqwerty

Reputation: 117

Cannot align images in grid tailwindcss

I have a problem with the Tailwind CSS grid system. I have a little lag at the bottom with the two images. I can't seem to find a solution to this problem.

<div class="grid grid-cols-4 grid-rows-2 gap-4">
        <div class="col-start-1 col-span-2 row-start-1 row-span-2">
            <img src=".." class="rounded-lg"/>
        </div>
        <div class="col-start-3 col-span-1 row-span-1">
            <img src="..." class="rounded-lg"/>
        </div>
        <div class="col-start-4 col-span-1 row-span-1">
            <img src="..." class="rounded-lg"/>
        </div>
        <div class="col-span-2 row-start-2 row-span-1">
            <img src="..." class="rounded-lg"/>
        </div>
    </div>

enter image description here

Do you have an idea ? Am I missing something?

Upvotes: 1

Views: 940

Answers (1)

s.kuznetsov
s.kuznetsov

Reputation: 15213

Try overriding the rule for image height to 100% with !important along with object-fit: cover and width: 100%. Like this:

img {
    width: 100%;
    height: 100%!important;
    object-fit: cover;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.css"/>

<div class="grid grid-cols-4 grid-rows-2 gap-4">
    <div class="col-start-1 col-span-2 row-start-1 row-span-2">
        <img src="https://img.fonwall.ru/o/1c/kosmos-planety-vselennaya-360z.jpg" class="rounded-lg" />
    </div>
    <div class="col-start-3 col-span-1 row-span-1">
        <img src="https://img.fonwall.ru/o/1c/kosmos-planety-vselennaya-360z.jpg" class="rounded-lg" />
    </div>
    <div class="col-start-4 col-span-1 row-span-1">
        <img src="https://img.fonwall.ru/o/1c/kosmos-planety-vselennaya-360z.jpg" class="rounded-lg" />
    </div>
    <div class="col-span-2 row-start-2 row-span-1">
        <img src="https://img.fonwall.ru/o/1c/kosmos-planety-vselennaya-360z.jpg" class="rounded-lg" />
    </div>
</div>

Upvotes: 1

Related Questions