<div class="grid grid-cols-4 w-96 bg-zinc-800 rounded-md">
<div class="shrink-0 p-3 border-red-800 max-w-fit h-20 border">
<img src="./assets/placeholder.png" alt="" class="max-h-full rounded-full">
</div>
<div class="p-3 col-span-2 font-helvetica border-red-800 border">
<h1 class="text-neutral-100">Andrea Militano</h1>
<div class="flex text-neutral-400">
<fa-icon [icon]="faCheck" class=""></fa-icon>
<fa-icon [icon]="faCheck" class="-translate-x-2"></fa-icon>
<p class="text-sm truncate -translate-x-1">Contenuto del messaggio, Contenuto del messaggio, Contenuto del messaggio</p>
</div>
</div>
<div class="border-red-800 justify-self-end p-3 border">
<p class="text-neutral-400 text-sm">21.23</p>
</div>
</div>and this is the result: Grid Layout
How can I to to let the second column to grab all the space left from the other two columns? I thought that with a flex layout it was easier, but I struggle to make the last div end within the parent div border. This is the flex variant:
<div class="flex w-96 bg-zinc-800 rounded-md">
<div class="shrink-0 p-3 border-red-800 max-w-fit h-20 border">
<img src="./assets/placeholder.png" alt="" class="max-h-full rounded-full">
</div>
<div class="p-3 font-helvetica border-red-800 border max-w-[65%]">
<h1 class="text-neutral-100">Andrea Militano</h1>
<div class="flex text-neutral-400">
<fa-icon [icon]="faCheck" class=""></fa-icon>
<fa-icon [icon]="faCheck" class="-translate-x-2"></fa-icon>
<p class="text-sm truncate">Message content</p>
</div>
</div>
<div class="border-red-800 p-3 border">
<p class="text-neutral-400 text-sm">21.23</p>
</div>
</div>© Unioun.com. Crafted by Unioun Technologies