how to place multiple items in a grid column cell using tailwind? - css

Question

I have a design where I have 3 items. 2 items should be placed vertically and 1 item has to be in it's own cell. So, 2 items should be placed in 1 cell vertically and 1 item takes it's own whole cell. To demonstrate, below is the image
How can I achieve this design using tailwind?

Answer 1

You can make such layout using grid - separate your layout on three columns (sidebar + main content spans on two columns) and 2 rows like #ChenBr did
<div class="border-2 grid grid-cols-3 grid-rows-2">
<div class="border-2 col-span-1">1</div>
<div class="border-2 col-span-2 row-span-2">2</div>
<div class="border-2 col-span-1">3</div>
<div>
However grid-rows-2 will be compiled as
.grid-rows-2 {
grid-template-rows: repeat(2, minmax(0, 1fr));
}
1fr for both rows means 2 rows will be sized equally. So I would recommend to change this class into grid-rows-[min-content_1fr] - that mean first row will take place base on its minimum content
min-content - is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.
and the second one will take the rest - but it's up to your application
Basic example
<div class="grid grid-cols-3 grid-rows-[min-content_1fr]">
<div>1</div>
<div class="col-span-2 row-span-2">2</div>
<div>3</div>
<div>
DEMO

Answer 2

You can achieve this setup using grid/flex. Using one or the other depends on your content.
Grid:
Create a three-by-two grid using grid-cols-3 and grid-rows-2 on the grid's container. Then, set each container's span to fit your structure (using col-span-n row-span-n).
Read about grid-cols here and about grid-row here.
<div class="border-2 grid grid-cols-3 grid-rows-2">
<div class="border-2 col-span-1">1</div>
<div class="border-2 col-span-2 row-span-2">2</div>
<div class="border-2 col-span-1">3</div>
<div>
Tailwind-play
Flex:
We are going to have two containers. The main container will wrap all the elements (including the second container), and the inner container will wrap your first two elements. Each of those containers will have a flex utility applied to it.
Then, we will apply flex-col on the second container. This way, the container will place its children on top of each other, just like the first column of your image.
The first container's default flex-direction is flex-row which is why the inner container and the third element will be positioned next to each other, just like a row.
To give the structure a proportion similar to your image, we can set the inner container's width to 30% (w-[30%]), and the third element to 70% (w-[70%]).
Read about flex-direction here.
<div class="flex border-2">
<div class="flex w-[30%] flex-col">
<div class="border-2">1</div>
<div class="border-2">2</div>
</div>
<div class="w-[70%] border-2">3</div>
<div></div>
</div>
Tailwind-play