I am creating one responsive design where i need to use three column inside header for all the device resolution.
I have started developing mobile first responsive header, In below code i am escaping the tablet resolution. For explanation used only mobile and laptop resolution.
<div class="m-0 grid grid-cols-12 gap-1">
<div class="rounded-lg col-span-2 lg:col-span-1">backIcon</div>
<div class="rounded-lg shadow col-span-8 lg:col-span-10">Hello World</div>
<div class="rounded-lg col-span-2 bg-purple-500 shadow lg:col-span-1">Icon</div>
</div>
This code i used in tailwind Play Area
Above code works fine for mobile, But when i check for laptop screen, I found like the first column have more space which i need to decrease, So that the middle column content should be near to the first column content.
Need help.
2
Answers
I have got one solution for this:
We can use
grid-template-columns: auto 1fr 1fr auto;
css, And in tailwind it should be like :grid-cols-[auto_1fr_auto]
using this has removed the extra space taken in the each column of the grid and working as expected.
Try this