skip to Main Content

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


  1. Chosen as BEST ANSWER

    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.

    .five_item_grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(135px, 1fr));
      gap: 1em;
    }
    
    @media (max-width: 950px) {
      .five_item_grid {
        grid-template-columns: repeat(
          4,
          minmax(135px, 1fr)
        ); /* 4 columns on smaller screens */
      }
    
      .five_item:nth-child(4) {
        grid-column: 3 / span 2 !important; /* Adjust 4th item to span 1 column */
      }
    
      .five_item:nth-child(5) {
        grid-column: 2 / span 2; /* Adjust 5th item to span 2 columns */
      }
    }
    
    @media (max-width: 650px) {
      .five_item_grid {
        display: grid;
        grid-auto-flow: row !important;
        grid-template-rows: 1fr !important;
        grid-template-columns: none;
      }
      .five_item {
        outline: 1px solid red;
        grid-column: span 1 !important; /* Default for all items */
      }
      .five_item:nth-child(4) {
        grid-column: span 1 !important;
      }
    }
    
    .five_item {
      grid-column: span 2; /* Default for all items */
    }
    
    /* Specific rule for 4th item on larger screens */
    .five_item:nth-child(4) {
      grid-column: 2 / span 2;
    }
    
    

  2. 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.

    .grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(135px, 1fr));
      gap: 1em;
    }
    
    .item {
      height: 100px;
      outline: 1px solid red;
      grid-column: span 2;
    }
    
    .item:nth-child(4) {
      grid-column: 2 / span 2;
    }
    <div class="grid">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search