CODEWITHSUNDEEP
htmlcssreactjsflexbox
Shankar Panda
Shankar Panda

Reputation: 822

How to fix the css to keep 4 cards in a row while they are center aligned?

Facing an issue with a css property (Flex) . I have multiple cards and i want it to be 4 cards per row so that irrespective for screen size it will always have 4 cards per row. Since i am using display element as Flex it adjusted according to screen size. Very new to this front end dev work, can you please check and fix my CSS property to align 4 cards in a row.

here is the code: https://codesandbox.io/s/tender-feynman-we6n9s?file=/src/productsConfig.js

Basically here i want 4 cards per row. enter image description here

Upvotes: 0

Views: 3051

Answers (4)

amel
amel

Reputation: 1154

Using flex, and since you want the width of the cards to be fixed (300px), and assuming you're only working on large screens, to guarantee displaying 4 elements of 300ps in a row, it's best to also set the width of the parent to 1500px for example, in this case only 4 elements with margins, paddings will be displayed in a single row.

.container {
  display: flex;
  flex-wrap: wrap;
  width: 1500px;
  justify-content: center;
  margin: auto;
}

.react-card-flip {
  flex: 1 0 300px;
  border: 1px solid red;
  margin: 5px;
  min-height: 50px;
}
<div class="container">
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
</div>

Upvotes: 0

Anstice Li
Anstice Li

Reputation: 11

I thought the problem is "incorrect level".

Press "f12" in https://we6n9s.csb.app/, then you will see the 1st level is "container".
The 2nd level is "react-card-flip".
The 3rd level is "react-card-flipper".
The 4th level is "react-card-front".
The 5th level is "card".

Maybe you could use .react-card-flip but not .card

.react-card-flip {
  position: flex;
  flex: 1 0 22%;
  border: 1px solid red;
  width: 22%;
  height: 300px;
  min-height: 50px;
}

Upvotes: 0

Eve
Eve

Reputation: 112

You can add flex-basis, it sets the size of the content box, so your css flex-basis: 25% on class .react-card-flip

Update

if you don't want increase your space then try this:

.react-card-flip:nth-child(3n+1):not(:first-child) {
  break-after: always;
}

this code just simply found your 4th element and add a break on it. Just try to decrease your page using ctrl + scroll your mouse to see. It max 4 cards per row.

try on sandbox

Upvotes: 1

NIKUNJ KOTHIYA
NIKUNJ KOTHIYA

Reputation: 2165

Try with adding this style to your style.css file for responsive auto card wrap on space.

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: calc(25% - 40px);
  margin: 20px;
}

Upvotes: 0

Related Questions