Html Question posted in
Some basic documentation can be found here.

Html – Remove padding or margin in grid column space using tailwind css

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    Try this

    <div class="m-0 grid grid-cols-12 gap-1 lg:gap-0">
  <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search