I am trying to use React and CSS with TailwindCSS to create a classic services component.
Where 5 options are presented as cards, in 2 rows, with 3 on the top and 2 on the bottom row.
Then i want the bottom two to be centered (like a upside down triangle). I have attached an image that gives the idea.
I have been through a few pages of people doing it but not been able to replicate the results.
I wanted the 5 cards to be reactive to screen size changes so they will shrink, but around certain screen sizes it will obviously drop a column for tablets and be singles for phone.
import React from 'react';
import { MainServicesArray } from '../../utils/data/CompanyData';
function ServicesComponent() {
return (
<section className='grid h-full w-full min-h-screen'>
<div className='grid grid-rows-reg h-full w-full'>
<section className='grid justify-center py-4 px-10'>
<article className='grid'>
<div className='p-4 text-center'>
<h3 className='text-gray-600'>Our Services</h3>
<span className='text-colour3 font-semibold'>
Our Professional and Independent Services
</span>
<div className='border-b-2 border-solid border-colour5 pt-2'></div>
</div>
</article>
</section>
<section className='grid w-4/5 mx-auto'>
<div className='grid py-6'>
<div className='split_grid'>
{MainServicesArray.map((service) => (
<Card service={service} key={service.label} />
))}
</div>
</div>
</section>
</div>
</section>
);
}
function Card({ service }) {
return (
<article className='bg-pink-400'>
<div>
<div>
<img src={service.icon} alt={`${service.label} icon`} />
</div>
<div>
<h4>{service.label}</h4>
</div>
<div>
<p>{service.content}</p>
</div>
</div>
</article>
);
}
export default ServicesComponent;
.split_grid {
display: grid;
grid-template-columns: repeat(3, minmax(270px, 1fr));
gap: 15px;
justify-content: center;
justify-items: center;
}
/* Center the last two items when there are leftover items */
.split_grid > article:nth-last-child(2) {
background: #000;
grid-column: 1 / span 2;
}
I can make it work by creating a row of two and splitting it up, but then i lose responsiveness and the boxes become different sizes.
I tried to justify the contents and create the 4th container 50% over the the right.
2
Answers
Thank you Paulie_D for showing me how.
If anyone else needs this I have made it responsive to drop down to two columns then one.
Essentially, you don’t want a 3 column grid, you want a six column grid with each card two columns wide (thus the
min
is halved in your case), like so.