Issue
so i want to make 4 social media buttons arrange in a grid of 2x2 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 2x2 grid I tried a lot of different things but still not able to trouble shoot this issue
Solution
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>
Answered By - Wongjn
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.