CODEWITHSUNDEEP
css
yongchang
yongchang

Reputation: 522

Render card layout as 2x2 / 3x3

I am trying to render my cards in 2x2 or 3x3, but currently my cards are only rendered in one row. The styling for my current layout are all defined in style.css.

This is my codesandbox.

Upvotes: 1

Views: 271

Answers (3)

Joshua Folorunsho
Joshua Folorunsho

Reputation: 365

I added card-container class

 <div className="card-container">
    {data.slice(minValue, maxValue).map((item, i) => {
      return i >= minValue && i <= maxValue && createCards(i, item);
    })}
  </div>

You can achieve this 2 / 2 or 3 / 3 using CSS Grid

.card-container {
  display: grid;
  gap: 1rem; // add gap between card
  grid-template-columns: repeat(2, 1fr); // Which kind of grid, change 2 to 3 if you want 3 / 3
}

More on CSS Grid here

Upvotes: 0

Robert
Robert

Reputation: 2763

add class col-container

  return (
    <div>
      <div class="col-container">
        {data.slice(minValue, maxValue).map((item, i) => {
          return i >= minValue && i <= maxValue && createCards(i, item);
        })}
      </div>
    </div>
  );

and setup grid on it.

.col-container {
  display: grid;
  width: max-content;
  grid-template-columns: 1fr 1fr;
}

Upvotes: 0

mohammad mohammadi nodhe
mohammad mohammadi nodhe

Reputation: 2008

if i understand it right , you can change width in css .column like

for 2*2

   .column {
      width: 40%;
    }

for 3*3

.column {
  width: 30%;
}

also you can use Bootstrap col-6 for 22 and col-4 for 33

Upvotes: 2

Related Questions