如何制作响应式、居中、2 行 5 项网格

Question

我正在尝试使用 React 和 CSS 以及 TailwindCSS 来创建一个经典的服务组件。 其中 5 个选项以卡片形式呈现，分为 2 行，其中 3 个位于顶行，2 个位于底行。 然后我希望底部两个居中（就像一个倒三角形）。我附上了一张图片来说明这个想法。

我已经浏览了几页人的做法，但无法复制结果。

我希望这 5 张卡能够对屏幕尺寸的变化做出反应，这样它们就会缩小，但在某些屏幕尺寸附近，它显然会在平板电脑上下降一列，而在手机上则变为单列。

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;
}

我可以通过创建一行两行并将其拆分来使其工作，但随后我会失去响应能力并且盒子会变得不同大小。

我试图证明内容合理，并创建了第四个容器，其位置超出右侧 50%。

Answer 1

本质上，您不需要 3 列网格，您需要一个 six 列网格，每张卡有两列宽（因此在您的情况下

min

减半），就像这样。

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