Centering all divs when using css grid and make them all same height

Question

In my react and tailwindcss project I have the following code snippet in one of components:

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

This will produce the following results:

What I'm looking for is first of all to try to make all excess divs appear in the middle of the row like this (note that i don't mind doing it with plain css instead of tailwindcss):

I would also prefer that all the cards have the same height equal to the height of the largest card amongst them all even if that one wasn't on the same row.

Answer 1

The problem with your code is that you are setting the number of columns to 4 while on the second row you only want 3. In a grid the number of columns stays the same. Therefore it might be easier to use flexbox to get the solution you want. So instead of 'display: grid', I would use 'display: flex'.

Instead of setting a fixed number of columns, you might want to specify the maximum width of your cards and let the browser decide how many cards it can fit into one row.

By setting 'flex-wrap: wrap' you're telling the browser that it can start placing cards on a new row if the first one is full. By setting justify-'content: center' the cards will be horizontally centered in their flex-container.

By choosing the max-width of the cards, you can determine how many you want to be grouped into one row. You could also specify a height for the cards to make sure that they have the same height and set overflow: scroll in case the content is longer than what fits in the card.

Here's an example in plain CSS that I've tried to make as simple as possible:

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