Kevin Powell - Community•14mo ago

How can I replicate this grid layout?

Is it possible to get this exact grid layout using tailwind css? I'm so close I can't seem to get the 2nd and 3rd div to work with me

const Grid = () => {
  return (
    <div className='bg-rosered h-screen w-full flex justify-center items-center'>
        <div className='w-5/6 h-5/6 grid grid-cols-3 gap-x-2 gap-y-3 '>
            <div className='bg-black rounded-lg shadow-xl row-span-2'></div>
            <div className='bg-black rounded-lg shadow-xl '></div>
            <div className='bg-black rounded-lg shadow-xl '></div>
            <div className='bg-black rounded-lg shadow-xl col-span-2'></div>
            <div className='bg-black rounded-lg shadow-xl col-span-3'></div>
        </div>
    </div>
  )
}

const Grid = () => {
  return (
    <div className='bg-rosered h-screen w-full flex justify-center items-center'>
        <div className='w-5/6 h-5/6 grid grid-cols-3 gap-x-2 gap-y-3 '>
            <div className='bg-black rounded-lg shadow-xl row-span-2'></div>
            <div className='bg-black rounded-lg shadow-xl '></div>
            <div className='bg-black rounded-lg shadow-xl '></div>
            <div className='bg-black rounded-lg shadow-xl col-span-2'></div>
            <div className='bg-black rounded-lg shadow-xl col-span-3'></div>
        </div>
    </div>
  )
}

3 Replies

Senra•14mo ago

Tailwind..... 😬 can you send an SS of how your grid looks like?

Jochem•14mo ago

no idea about Tailwind, but you can do this very easily with vanilla CSS using grid-template-areas https://codepen.io/jochemm/pen/jOXXGgP?editors=1100

Jochem

CodePen

Grid example

...

MarkBoots•14mo ago

i copied your code, and it just works

Gaming

Programming

How can I replicate this grid layout?