-3

I have a problem with matching all my requirements regarding boxes in flexbox. Assume I have 3 breakpoints.

My requirements:

  1. On first breakpoint, boxes should be in one column, on second breakpoint in two columns, in third - three columns
  2. All items should always have equal width
  3. All rows should have equal amount of boxes (box must not ocupy two or three columns)
  4. Gap should be 20px

enter image description here

I tried with flex-basis, calcs etc but I am not able to match all 3 requirements at once.

Improve this question
3
  • 1
    Please edit your question to specifically and clearly define the problem that you are trying to solve. Additional details — including all relevant code, error messages, and debugging logs — will help readers to better understand your problem and what you are asking.
    – law_81
    Commented 22 hours ago
  • 1
    Your requirement 3 cannot be met in all circumstances, as is shown by your pictures. Please rephrase the requirement so it makes sense.
    – A Haworth
    Commented 22 hours ago
  • The success, or failure, of requirement 3 depends on the quantity of content available, the other three requirements are (relatively) simple to accomplish; where did you get stuck, what do you need help with? Where's your "minimal reproducible example" code to show your current best-efforts, what's the problem with the existing code?
    – David Thomas
    Commented 22 hours ago
Related questions
1120
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
567
How to make Flexbox items the same size
1552
How do I set distance between flexbox items?
Load 5 more related questions Show fewer related questions

0

Reset to default

Browse other questions tagged or ask your own question.