I'm trying to make a list of circles responsive. In small screen, I want them each to be place in a 2-column grid. But the problem is, if number of elements and number of columns are opposite in parities, in my case, I had 5 circles, then there will be one circle left. This circle will be placed on a cell to the left of the last row of the grid,. But what I want is to make it center. I tried to use col-span-full, but it'll make that circle bigger. Is there any way I can archive this. Here's my code
<script src="/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
.circle {
@apply w-full aspect-square rounded-full bg-blue-600 lg:col-span-1;
}
</style>
<body class="p-4">
<div class="border-[1px] border-red flex justify-center items-center">
<div class="grid grid-cols-2 w-full lg:grid-cols-5 gap-4 place-content-center">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</body>I'm trying to make a list of circles responsive. In small screen, I want them each to be place in a 2-column grid. But the problem is, if number of elements and number of columns are opposite in parities, in my case, I had 5 circles, then there will be one circle left. This circle will be placed on a cell to the left of the last row of the grid,. But what I want is to make it center. I tried to use col-span-full, but it'll make that circle bigger. Is there any way I can archive this. Here's my code
<script src="https://unpkg/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
.circle {
@apply w-full aspect-square rounded-full bg-blue-600 lg:col-span-1;
}
</style>
<body class="p-4">
<div class="border-[1px] border-red flex justify-center items-center">
<div class="grid grid-cols-2 w-full lg:grid-cols-5 gap-4 place-content-center">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</body>- Does this video from Kevin Powell help? – Adam Commented Feb 10 at 13:29
2 Answers
Reset to default 0Is there any specific reason you are not opting into using flex for this behavior? Either by flexing the entire view or just for mobile? I have added in my example here a way to use grid for lg + screens and flex for smaller screens.
I have also in the .circle class moved w-full to lg + size and added a new class that calculates the space it has available minus the gap and divides that by two to make it fit snug in the flex. w-[calc(calc(100%-1rem)/2)] this is mostly for readability, but it could also be written as w-[calc(50%-0.5rem))] if you feel that is more to your liking.
Hope this helps you, have a great day!
<script src="https://cdn.tailwindcss"></script>
<style type="text/tailwindcss">
.circle {
@apply w-[calc(calc(100%-1rem)/2)] lg:w-full aspect-square rounded-full bg-blue-600
lg:col-span-1
}
</style>
<body class="p-4">
<div class="border-red flex items-center justify-center border-[1px]">
<div class="flex flex-row flex-wrap lg:grid w-full lg:grid-cols-5 gap-4 place-content-center">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</body>Note: For the examples, the body and the first div inside the body are not important; these were left in by the person asking the question. Therefore, I made minimal modifications to the code and only kept the essential parts of the HTML: the container and the children.
Solution #1: use flex instead of grid
flex justify-center items-center
In such cases, developers usually overthink the task, and a simple flex would be more than enough. If you set the children to the appropriate width within the flex, there will always be 2 columns on small screens, and you can have 5 columns from the lg breakpoint onward.
This was also hinted at in the other answer, but it seemed somewhat incomplete since it didn't finish for the lg breakpoint.
So, in the case of flex, you need to specify the element width in percentage. If you know how many columns you want, you can store that in a variable (such as --columns), and one element will be 100% / --columns. You should subtract the gap value given to flex, which from TailwindCSS v4 onwards is the --spacing variable * gap count, meaning gap-4 --> --spacing * 4. But the gap is distributed between the two adjacent elements, so for one element, you only need to consider half of the gap: (--spacing * 4) / 2 --> --spacing * 2
width: calc((100% / var(--columns)) - (var(--spacing) * 4) / 2);
With this, using @variant, I just need to modify the --columns variable from 2 to 5 for the lg breakpoint.
<script src="https://unpkg/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
.circle {
@apply aspect-square rounded-full bg-blue-600;
--columns: 2;
width: calc((100% / var(--columns)) - (var(--spacing) * 2));
@variant lg {
--columns: 5;
}
}
</style>
<div class="w-full flex flex-wrap gap-4 justify-center border-1">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>Currently, the gap needs to be specified in two different places: for the container and for the children. You can modify this so that the gap is only specified once in the container, and then you can use the saved variable in the children.
<script src="https://unpkg/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
.container {
--gap-value: 4;
--gap-size: calc(var(--spacing) * var(--gap-value));
gap: var(--gap-size);
}
.circle {
@apply aspect-square rounded-full bg-blue-600;
--columns: 2;
width: calc((100% / var(--columns)) - (var(--gap-size) / 2));
@variant lg {
--columns: 5;
}
}
</style>
<div class="container w-full flex flex-wrap justify-center border-1">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>Or the separately declared .container class can be omitted if you use the :has pseudo-class, which allows you to apply styling to .flex elements that contain a .circle child element. The :has pseudo-class has been available in all modern browsers since December 2023.
<script src="https://unpkg/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
.flex:has(.circle) {
--gap-value: 4;
--gap-size: calc(var(--spacing) * var(--gap-value));
gap: var(--gap-size);
}
.circle {
@apply aspect-square rounded-full bg-blue-600;
--columns: 2;
width: calc((100% / var(--columns)) - (var(--gap-size) / 2));
@variant lg {
--columns: 5;
}
}
</style>
<div class="w-full flex flex-wrap justify-center border-1">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>Solution #2 (just a cheat)
I'm leaving it here only because of the multitude of ideas, as there are many creative solutions to the problem.
You can achieve it with an optical illusion as well. I'm saying that the grid is initially 4 columns for you, and each round takes up 2 columns. This way, I can center the 2-column child in the 4-column grid using the last:col-start-2 class.
Following this logic, you only need two rules to ensure that you can center the elements: container's column count should be divisible by the child's col-span, and you should container's column count at least 3 columns.
Personally, the flex solution is much more practical than this; this is really just a brainstorming idea.
<script src="https://unpkg/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
.circle {
@apply w-full aspect-square rounded-full bg-blue-600 col-span-2 lg:col-span-1;
@apply last:col-start-2;
}
</style>
<div class="grid grid-cols-4 w-full lg:grid-cols-5 gap-4 justify-center border-1">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>