How to center the last row of items in a grid using Tailwind CSS?
P粉311563823
2023-08-28 20:06:09
<p>I'm having trouble trying to use Tailwind (using React) to align my final project in a grid layout. Basically I want 3 items and if there are no 3 items left i.e. 2 or 1, I want them to be centered. </p>
<p>I tried some sort of col span but it didn't work as expected. </p>
<p>To better illustrate what I'm trying to do, I've attached some diagrams</p>
<p>Current layout: </p>
<p>Desired layout with 2 items remaining: </p>
<p>Desired layout with 1 item remaining: </p>
<pre class="brush:html;toolbar:false;"><div className="xl:grid grid-cols-3 gap-4">
//cards .map(item)
</div>
</pre></p>
You can consider using
flex
,flex-wrap
,justify-center
7 items:
Output:
8 items:
Usetailwind-css Playground