Kevin Powell - Community•2mo ago

How can I easily get this grid with pushed down element on other column?

Pretty much title, I designed this in my Figma but now when coding I am stuck, I tried for 3 hours, googling and couldn't find any good results so you guys are my last resort ❤️ this is my try (code):

<section id="bistro" className={`${paddingClasses} grid grid-cols-1 lg:items-center lg:grid-cols-2 gap-x-16 xl:gap-x-24 2xl:gap-x-48`}>
            <div className="grid grid-cols-2 items-start lg:grid-cols-2 grid-rows-2 gap-3 h-60 lg:h-full mb-5 lg:mb-0">
                <Image
                    src="/images/culinair/IMG_9142.jpeg"
                    alt="culinair"
                    className="h-full lg:h-2/3 w-full row-span-2 rounded-lg object-cover"
                    width={1920}
                    height={1080}
                />
                <Image
                    src="/images/culinair/IMG_9815.jpeg"
                    alt="culinair"
                    width={1920}
                    height={1080}
                    className="h-full lg:h-[65%] lg:mt-auto w-full rounded-lg object-cover"
                />
                <Image
                    src="/images/culinair/IMG_9088.jpeg"
                    alt="culinair"
                    width={1920}
                    height={1080}
                    className="h-full w-full rounded-lg object-cover"
                />
            </div>
            <div>
                ...other elements
            </div>
        </section>

<section id="bistro" className={`${paddingClasses} grid grid-cols-1 lg:items-center lg:grid-cols-2 gap-x-16 xl:gap-x-24 2xl:gap-x-48`}>
            <div className="grid grid-cols-2 items-start lg:grid-cols-2 grid-rows-2 gap-3 h-60 lg:h-full mb-5 lg:mb-0">
                <Image
                    src="/images/culinair/IMG_9142.jpeg"
                    alt="culinair"
                    className="h-full lg:h-2/3 w-full row-span-2 rounded-lg object-cover"
                    width={1920}
                    height={1080}
                />
                <Image
                    src="/images/culinair/IMG_9815.jpeg"
                    alt="culinair"
                    width={1920}
                    height={1080}
                    className="h-full lg:h-[65%] lg:mt-auto w-full rounded-lg object-cover"
                />
                <Image
                    src="/images/culinair/IMG_9088.jpeg"
                    alt="culinair"
                    width={1920}
                    height={1080}
                    className="h-full w-full rounded-lg object-cover"
                />
            </div>
            <div>
                ...other elements
            </div>
        </section>

(see first image for design I made, second image is what I got as result, close but not the one I want, I need it to exactly as design, and the images shouldn't grow that large) using TailwindCSS.

2 Replies

pangalan1•2mo ago

masonry grid seems to be good here will make a codepen

pangalan1•2mo ago

https://codepen.io/geomydas/pen/wvVpOzW

geomydas

CodePen

Untitled

...

Gaming

Programming

How can I easily get this grid with pushed down element on other column?