使用 css 网格时将所有 div 居中并使它们高度相同

Question

在我的 React 和 tailwindcss 项目中，我的组件之一中有以下代码片段：

<div className="container">
   <div className="grid grid-cols-4 gap-x-2 gap-y-4">
       {valueCards.map(
          (item,index) => (
             <div key={index}>
                 <ValuesCard description={item.description} isPrimary={index % 2 === 0} />
             </div> 
          )
        )}
    </div>
</div>

这将产生以下结果：

我要寻找的是首先尝试使所有多余的 div 出现在行的中间，如下所示（请注意，我不介意使用纯 css 而不是 tailwindcss 来实现）：

我还希望所有卡片的高度都等于其中最大卡片的高度，即使该卡片不在同一行。

Answer 1

您的代码的问题在于您将列数设置为 4，而在第二行中您只需要 3。在网格中，列数保持不变。因此，使用 flexbox 来获得您想要的解决方案可能会更容易。因此，我将使用“display: flex”，而不是“display: grid”。

您可能希望指定卡片的最大宽度，并让浏览器决定一行可以容纳多少张卡片，而不是设置固定的列数。

通过设置“flex-wrap:wrap”，您可以告诉浏览器，如果第一行已满，它可以开始将卡片放置在新行上。通过设置 justify-'content: center' 卡片将在其弹性容器中水平居中。

通过选择卡片的最大宽度，您可以确定要分成一行的卡片数量。您还可以指定卡片的高度，以确保它们具有相同的高度，并设置溢出：滚动，以防内容比卡片适合的长度长。

下面是一个纯 CSS 示例，我试图使其尽可能简单：

 .flex-container {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
    }

    .card {
      background-color: lightgray;
      padding: 0.5rem;
      max-width: 20%;
    }

  <div class="flex-container">
      <div class="card">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
        eveniet pariatur libero, sunt deserunt quam accusamus ducimus recusandae
        molestias eaque architecto! Nulla, voluptatibus blanditiis? Animi minima
        eaque molestiae esse autem.
      </div>
      <div class="card">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
        eveniet pariatur libero, sunt deserunt quam accusamus ducimus recusandae
        molestias eaque architecto! Nulla, voluptatibus blanditiis? Animi minima
        eaque molestiae esse autem.
      </div>
      <div class="card">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
        eveniet pariatur libero, sunt deserunt quam accusamus ducimus recusandae
        molestias eaque architecto! Nulla, voluptatibus blanditiis? Animi minima
        eaque molestiae esse autem.
      </div>
      <div class="card">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
        eveniet pariatur libero, sunt deserunt quam accusamus ducimus recusandae
        molestias eaque architecto! Nulla, voluptatibus blanditiis? Animi minima
        eaque molestiae esse autem.
      </div>
      <div class="card">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
        eveniet pariatur libero, sunt deserunt quam accusamus ducimus recusandae
        molestias eaque architecto! Nulla, voluptatibus blanditiis? Animi minima
        eaque molestiae esse autem.
      </div>
      <div class="card">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
        eveniet pariatur libero, sunt deserunt quam accusamus ducimus recusandae
        molestias eaque architecto! Nulla, voluptatibus blanditiis? Animi minima
        eaque molestiae esse autem.
      </div>
      <div class="card">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
        eveniet pariatur libero, sunt deserunt quam accusamus ducimus recusandae
        molestias eaque architecto! Nulla, voluptatibus blanditiis? Animi minima
        eaque molestiae esse autem.
      </div>