0

I have the below HTML with a left column (image) and right columns.

The right columns have too much spacing in between, most probably because the grid spreads the items on the right vertically. I don't want any vertical space between them and control the spacing using margin. How can I achieve this?

enter image description here

Please note, the first grid child is the logo and not the image because on smaller screens I want it to appear on top of the image.

<div class="lg:grid lg:grid-cols-7 grid-rows-4 items-start lg:gap-x-8 xl:gap-x-16">
  
  <!-- Logo, name and tagline -->
  <div class="lg:col-span-3 lg:col-start-5">
  </div>         

  <!-- Images -->
  <div class="lg:col-span-4 lg:col-start-1 lg:row-span-4 lg:row-start-1">
  </div>        

  <!-- More info -->
  <div class="border-t border-gray-200 lg:col-span-3 lg:col-start-5 pt-10 grow-0">
    <h3 class="text-sm font-medium text-gray-900">More info</h3>
  </div>

  <!-- Contact -->
  <div class="border-t border-gray-200 lg:col-span-3 lg:col-start-5 pt-10 grow-0">
    <h3 class="text-sm font-medium text-gray-900 mb-4">Contact</h3>
  </div>

  <!-- Social -->
  <div class="border-t border-gray-200 lg:col-span-3 lg:col-start-5 pt-10 grow-0">
    <h3 class="text-sm font-medium text-gray-900 mb-4">Social</h3>
  </div>
            
</div>


<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-white">
  <div class="mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
    <div class="lg:grid lg:grid-cols-7 grid-rows-4 items-start lg:gap-x-8 xl:gap-x-16 place-content-start">
      
      <!-- Logo, name and tagline -->
      <div class="lg:col-span-3 lg:col-start-5">
        <div class="flex flex-row">

          <img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80" alt="" class="h-16 rounded-md">

          <div class="ml-7">
            <h1 class="text-2xl font-extrabold tracking-tight text-gray-900 sm:text-3xl">Mother Cho&#39;s</h1>
          </div>
        </div>
      </div>         

      <!-- Images -->
      <div class="lg:col-span-4 lg:col-start-1 lg:row-span-4 lg:row-start-1 mt-14 sm:mt-16 lg:mt-0">

        <!-- Gallery -->
        <div class="flex flex-col-reverse">
          
          <!-- Image selector -->
          <div class="mt-6 w-full max-w-2xl mx-auto lg:max-w-none">
            <div class="grid grid-cols-4 gap-6" aria-orientation="horizontal" role="tablist">
              
              <button id="tabs-1-tab-1" class="relative h-24 bg-white rounded-md flex items-center justify-center text-sm font-medium uppercase text-gray-900 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring focus:ring-offset-4 focus:ring-opacity-50" aria-controls="tabs-1-panel-1" role="tab" type="button">
                <span class="sr-only"> Angled view </span>
                <span class="absolute inset-0 rounded-md overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80" alt="" class="w-full h-full object-center object-cover">
                </span>
                <span class="ring-transparent absolute inset-0 rounded-md ring-2 ring-offset-2 pointer-events-none" aria-hidden="true"></span>
              </button>

              <button id="tabs-1-tab-1" class="relative h-24 bg-white rounded-md flex items-center justify-center text-sm font-medium uppercase text-gray-900 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring focus:ring-offset-4 focus:ring-opacity-50" aria-controls="tabs-1-panel-1" role="tab" type="button">
                <span class="sr-only"> Angled view </span>
                <span class="absolute inset-0 rounded-md overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80" alt="" class="w-full h-full object-center object-cover">
                </span>
                <span class="ring-transparent absolute inset-0 rounded-md ring-2 ring-offset-2 pointer-events-none" aria-hidden="true"></span>
              </button>
            </div>
          </div>

          <div class="w-full aspect-w-1 aspect-h-1">            
            <!-- Tab panel, show/hide based on tab state. -->
            <div id="tabs-1-panel-1" aria-labelledby="tabs-1-tab-1" role="tabpanel" tabindex="0">
              <img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80" alt="Angled front view with bag zipped and handles upright." class="w-full h-full object-center object-cover sm:rounded-lg">
            </div>
          </div>
        </div>        
      </div>


        <div class="border-t border-gray-200 lg:col-span-3 lg:col-start-5 pt-2 grow-0">
          <h3 class="text-sm font-medium text-gray-900">More info</h3>
          <p class="mt-4 text-sm text-gray-500">Taiwanese vegan food</p>
        </div>

      <div class="border-t border-gray-200 lg:col-span-3 lg:col-start-5 grow-0">
        <h3 class="text-sm font-medium text-gray-900 mb-4">Contact</h3>

          <div class="flex items-center space-x-2 my-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
            </svg>
            <a href="mailto:info@motherchos.com.au"><span class="text-gray-500 text-sm font-medium">info@motherchos.com.au</span></a>
          </div>

          <div class="flex items-center space-x-2 my-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
            </svg>
            <a href="https://www.motherchos.com.au"><span class="text-gray-500 text-sm font-medium">https://www.motherchos.com.au</span></a>
          </div>



      </div>


        <div class="border-t border-gray-200 lg:col-span-3 lg:col-start-5 pt-2 grow-0">
          <h3 class="text-sm font-medium text-gray-900">Social</h3>
          <ul role="list" class="flex items-center space-x-6 mt-4">
            

              <li>
                <a href="https://www.instagram.com/mothercho" class="flex items-center justify-center w-6 h-6 text-gray-400 hover:text-gray-500">
                  <span class="sr-only">Visit on Instagram</span>
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
                  </svg>
                </a>
              </li>
          </ul>
        </div>

                
    </div>
  </div>
</div>
migu
  • 4,236
  • 5
  • 39
  • 60

1 Answers1

1

Updated Answer after OP uploads the full code.

Your code had lot of unnecessary styles. The two pictures at the left bottom are causing the vertical spacing ( If you remove them you can see), I did not get the correction in your code so I had written my code for building your page . I had used simple flex for building the page.

This is the basic layout I had used using the flex

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex flex-row">
  <div class="flex flex-col bg-red-300 p-2">Left
    <div class="bg-green-200 m-2">Big Pic</div>
    <div class="flex flex-row m-2">
      <div class="bg-blue-200">photo-1</div>
      <div class="bg-blue-400">photo-2</div>
    </div>
  </div>
  <div class="flex flex-col bg-red-300">Right
    <div class="flex flex-row ">
      <div class="bg-pink-200">photo-1</div>
      <div class="bg-pink-400">Heading</div>
    </div> 
    <div class="bg-yellow-200">More info</div>
    <div class="bg-orange-200">Contact</div>
    <div class="bg-amber-500">Social></div>
  </div>
</div>

Now this is your page look like when using the flex .

<script src="https://cdn.tailwindcss.com"></script>


<div class="flex flex-row">
  <div class="flex flex-col bg-white p-2">
    <div class="w-full aspect-w-1 aspect-h-1">
      <div id="tabs-1-panel-1" aria-labelledby="tabs-1-tab-1" role="tabpanel" tabindex="0">
        <img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80" alt="Angled front view with bag zipped and handles upright." class="w-full h-full object-center object-cover sm:rounded-lg" />
      </div>
    </div>
    <div class="flex flex-row m-2 mt-6 w-full space-x-4 max-w-2xl mx-auto lg:max-w-none">
      <div class="bg-blue-200">
        <button id="tabs-1-tab-1" class="relative h-16 w-24 bg-green-200 rounded-md flex items-center justify-center text-sm font-medium uppercase text-gray-900 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring focus:ring-offset-4 focus:ring-opacity-50" aria-controls="tabs-1-panel-1" role="tab" type="button">
          <span class="absolute inset-0 rounded-md overflow-hidden">
            <img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80" alt="" class="w-full h-full object-center object-cover" />
          </span>
          <span class="ring-transparent absolute inset-0 rounded-md ring-2 ring-offset-2 pointer-events-none" aria-hidden="true"></span>
        </button>
      </div>
      <div class="bg-blue-400">
        <button id="tabs-1-tab-1" class="relative w-24 h-16 bg-white rounded-md flex items-center justify-center text-sm font-medium uppercase text-gray-900 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring focus:ring-offset-4 focus:ring-opacity-50" aria-controls="tabs-1-panel-1" role="tab" type="button">
          <span class="absolute inset-0 rounded-md overflow-hidden">
            <img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80" alt="" class="w-full h-full object-center object-cover" />
          </span>
          <span class="ring-transparent absolute inset-0 rounded-md ring-2 ring-offset-2 pointer-events-none" aria-hidden="true"></span>
        </button>
      </div>
    </div>
  </div>
  <div class="flex flex-col bg-white p-2">
    <div class="flex flex-row">
      <img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80" alt="" class="h-16 rounded-md" />

      <div class="ml-7">
        <h1 class="text-2xl font-extrabold tracking-tight text-gray-900 sm:text-3xl">Mother Cho&#39;s</h1>
      </div>
    </div>
    <div class="bg-white mt-3">
      <div class="border-t border-gray-200 lg:col-span-3 lg:col-start-5 pt-2 grow-0">
        <h3 class="text-sm font-medium text-gray-900">More info</h3>
        <p class="mb-3 text-sm text-gray-500">Taiwanese vegan food</p>
      </div>
    </div>
    <div class="bg-white">
      <div class="border-t border-gray-200 lg:col-span-3 lg:col-start-5 grow-0 pt-4">
        <h3 class="text-sm font-medium text-gray-900">Contact</h3>

        <div class="flex items-center space-x-2 my-1">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
          </svg>
          <a href="mailto:info@motherchos.com.au"><span class="text-gray-500 text-sm font-medium">info@motherchos.com.au</span></a>
        </div>

        <div class="flex items-center space-x-2 my-1">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
          </svg>
          <a href="https://www.motherchos.com.au"><span class="text-gray-500 text-sm font-medium">https://www.motherchos.com.au</span></a>
        </div>
      </div>
    </div>
    <div class="bg-white mt-3">
      <div class="border-t border-gray-200 lg:col-span-3 lg:col-start-5 pt-2 grow-0">
        <h3 class="text-sm font-medium text-gray-900">Social</h3>
        <ul role="list" class="flex items-center space-x-6 mt-2">
          <li>
            <a href="https://www.instagram.com/mothercho" class="flex items-center justify-center w-6 h-6 text-gray-400 hover:text-gray-500">
              <span class="sr-only">Visit on Instagram</span>
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
              </svg>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
  • Thank you, I've added the full code with a snippet. The problem is that the grid is spacing out the elements on the right vertically. Unfortunately, `pt-2 grow-0` didn't solve the issue. Thanks – migu Mar 28 '22 at 06:00
  • I had updated my answer , please check –  Mar 28 '22 at 07:08
  • Thanks. Looks great on desktop. But on mobile I don't think it will show the same, i.e. first the top right column, then the images and then the rest? – migu Apr 01 '22 at 06:40
  • Please upvote . For mobile view, you can changed the flex direction after screen changes to extra large like `flex flex-row xl:flex-col`. –  Apr 01 '22 at 07:00
  • I've upvoted, thank you very much for looking into this. I managed to get it working with the original code (see first code block in my post) and the grid by simply removing `grid-rows-4`. If you want, you can add it as the correct answer and I'll mark it as such. Thanks a lot. – migu Apr 07 '22 at 00:53
  • Glad to help you :) –  Apr 08 '22 at 05:03