html - How do I create a centred 3-column layout similar to Quora using Tailwind CSS

Question

I am attempting to re-create the layout of the home page of Quora.com using Tailwind CSS. The goal is to have a 3-column layout after the header section. I am having trouble centring the columns so that it matches the centring of the header. This is what I have so far:

The markup is:

  <div class="flex mb-7">
    <div class="w-full border shadow-sm h-12">
      <header>
        <div class="flex justify-center items-center space-x-6">
          <!-- Logo -->
          <div>
            <img src="images/logo.svg" alt="quora" class="w-24 h-12">
          </div>

          <div class="flex items-center justify-center space-x-7">
            <!-- Home Icon -->
            <div class="hover:bg-gray-100">
              <button>
                <!-- svg icon here -->
              </button>
            </div>

            <!-- Following Icon -->
            <div class="hover:bg-gray-100">
              <button>
                <!-- svg icon here -->
              </button>
            </div>

            <!-- Answer Icon -->
            <div class="hover:bg-gray-100">
              <button>
                <!-- svg icon here -->
              </button>
            </div>

            <!-- Spaces Icon -->
            <div class="hover:bg-gray-100">
              <button>
                <!-- svg icon here -->
              </button>
            </div>

            <!-- Notifications Icon -->
            <div class="hover:bg-gray-100">
              <button>
                <!-- svg icon here -->
              </button>
            </div>

          </div>

          <!-- Search box -->
          <div class="hover:border-blue-500 w-72 h-9 pt-1 pb-1 pl-3 pr-2 bg-white border rounded-sm flex justify-between items-center relative">
            <button type="submit" class="mr-1 outline-none focus:outline-none active:outline-none">
              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                   viewBox="0 0 24 24" class="w-4 h-4">
                <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
              </svg>
            </button>
            <input type="search" name="search" id="search" placeholder="Search Quora"
                   class="text-sm appearance-none w-full outline-none focus:outline-none active:outline-none"/>

          </div>

        <div class="flex items-center justify-center space-x-4">
          <div class="cursor-pointer hover:bg-gray-100 h-6 w-6 rounded-full  overflow-hidden object-cover">
            <img class="object-cover" src="https://images.unsplash.com/photo-1570724061670-86a53c509dee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60" alt="">
          </div>

          <div class="hover:bg-gray-100 h-6 w-6">
            <button>
              <!-- svg icon here -->
            </button>
          </div>


          <span class="cursor-pointer hover:bg-red-800 text-sm bg-red-700 rounded-full px-2 py-1 text-white ">Add Questions</span>

        </div>


        </div>
      </header>
    </div>
  </div>
  <!-- Three columns -->
  <div class="flex px-10 mb-5 space-x-6">
    <div class="w-1/3 bg-gray-400 h-12"></div>
    <div class="w-1/3 bg-gray-500 h-12"></div>
    <div class="w-1/3 bg-gray-400 h-12"></div>
  </div>

I am trying to achieve this:

question from:https://stackoverflow.com/questions/65943181/how-do-i-create-a-centred-3-column-layout-similar-to-quora-using-tailwind-css

Answer 1

You can leverage grid layout + max-w-7xl with mx-auto. Checkout this grid layout for working modal.

<div>
  <div class="bg-white shadow">
    <div class="max-w-7xl mx-auto py-1 bg-gray-100">
      Quora
    </div>
  </div>

  <div class="bg-gray-50">
   <div class="max-w-7xl mx-auto grid grid-cols-12 bg-gray-200">
     <div class="col-span-2">1</div>
     <div class="col-span-8 bg-gray-300">2</div>
     <div class="col-span-2">3</div>
   </div>
  </div>
</div>