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

Html – Using grid grid-cols-2 and gap-4 gives a vertical arrangement with gap without a grid

so i want to make 4 social media buttons arrange in a grid of 2×2 so i used the tailwind classes grid grid-cols-2 gap-4 on the parent container of the items. But this just gives me keeps the same top to bottom arrangement of all the items without arranging them in a grid.
Code attached below

<div class="social-grid grid col-span-2 gap-4">
            <div class="p-5 border-2 border-black rounded-full w-fit ">
              <i class="fab fa-twitter text-5xl"></i>
            </div>
            <div class="p-5 border-2 border-black rounded-full w-fit ">
              <i class="fab fa-facebook-f text-5xl"></i>
            </div>
            <div class="p-5 border-2 border-black rounded-full w-fit ">
              <i class="fab fa-linkedin-in text-5xl"></i>
            </div>
            <div class="p-5 border-2 border-black rounded-full w-fit ">
              <i class="fab fa-instagram text-5xl"></i>
            </div>
          </div>

This is how the web page looks right now

How do i fix this and make the 2×2 grid
I tried a lot of different things but still not able to trouble shoot this issue

Tags:

2

Answers


  1. 0

    You seem to have used col-span-2 on the grid container element which applies grid-column: span 2 / span 2. This would be used on grid children to control how they arrange themselves in the grid, not defining the amount of grid columns there are in the grid.

    Instead, consider applying grid-template-columns to the grid container element which defines the grid columns themselves. As you say, you could add the grid-cols-2 class name to have a 2×2 grid:

    <script src="https://cdn.tailwindcss.com/3.4.1"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="social-grid grid grid-cols-2 gap-4">
  <div class="p-5 border-2 border-black rounded-full w-fit ">
    <i class="fab fa-twitter text-5xl"></i>
  </div>
  <div class="p-5 border-2 border-black rounded-full w-fit ">
    <i class="fab fa-facebook-f text-5xl"></i>
  </div>
  <div class="p-5 border-2 border-black rounded-full w-fit ">
    <i class="fab fa-linkedin-in text-5xl"></i>
  </div>
  <div class="p-5 border-2 border-black rounded-full w-fit ">
    <i class="fab fa-instagram text-5xl"></i>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    In the code you pasted, you aren’t using grid-cols-2, you are using col-span-2 which would be used on a child item, not the parent. It seems based on your question you understand this, it may be a simple typo! Changing col-span-2 to grid-cols-2, and also adding grid-rows-2 in order to achieve the 2×2 effect you are looking for, should solve your problem.

    Additionally, you can specify col-start-1 col-start-2 row-start-1 and row-start-2 on your child items classes to place them where you would like in the grid.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search