Html Question posted in
Some basic documentation can be found here.

Html – How to make a responsive, centred, 5 item grid in 2 rows

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

    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