0

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

Shankar Panda
  • 736
  • 3
  • 11
  • 27

4 Answers4

1

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

Eve
  • 74
  • 1
  • 10
0

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;
}
NIKUNJ PATEL
  • 2,034
  • 1
  • 7
  • 22
0

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>
amel
  • 1,098
  • 2
  • 4
  • 17
  • somehow it not working in my code.. I updated my code, you can see it there.. somehow its getting adjusted according to screen size. can you please post a working code – Shankar Panda Feb 08 '23 at 08:17
  • In your code you should apply the CSS part of card on the react-card-flip class not on card class, because the direct children elements of the flex parent element (container) are the element with class react-card-flip, not card, I updated my code to be adapted to your classes naming could you check and tell me. – amel Feb 08 '23 at 08:57
  • Thanks Amel. I tried, when screen is changing the margin between the cards gets increased. – Shankar Panda Feb 08 '23 at 09:06
  • basically card width and hight should not change. Only thing is there should be 4 cards in a row and the container should be center aligned. Not able to make container fixed – Shankar Panda Feb 08 '23 at 09:15
  • But what to do if the width of the device is 800px for example, how to display 4 elements of 300px in a single line in a device of 800px of width? – amel Feb 08 '23 at 09:30
  • Apart from that, if we suppose that you are using your app on only big devices, I think the perfect solution will be to fix also the width of the container to make it 1500 px for example, In this case, you will be sure only 4 elements of 300px will be displayed in a single row, not more. – amel Feb 08 '23 at 09:30
  • in smaller device, there will be scroll. as you said if the width of the container is fixed, that would solve – Shankar Panda Feb 08 '23 at 09:33
  • I updated my code here you can check, and I added a margin auto to display center the elements – amel Feb 08 '23 at 09:39
0

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;
}
Anstice Li
  • 11
  • 2