Transition flexbox grid from 4x1 to 2x2 using media query

Question

I have an outer div with 4 cards inside. When I reach a specific width (done with media query) I want the cards to wrap so they are 2x2.

I tried to set width:50% for .inner on the breaking point but that doesn't solve the problem.

How can I achieve this using flexbox?

.outer{display:flex;flex-wrap:wrap;}
.inner{width:100px;height:200px;background-color:blue;margin-right:10px}

<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>

@Michael_B Why did you reopen this? The [target duplicate](https://stackoverflow.com/questions/31621257/how-to-control-number-of-items-per-row-using-media-queries-in-flexbox) appears to solve this problem in a more broadly applicable way. — TylerH, Mar 15 '18 at 14:43
Doesn't look like you've tried anything, or put any research time into it. — Heretic Monkey, Mar 15 '18 at 14:44
I explained in my edit. I read the duplicate and I didn't see any clear answers to this specific question. It also emphasized pre-processor code, margins and relative positioning, which have nothing to do with solving the problem at hand. @TylerH — Michael Benjamin, Mar 15 '18 at 14:44
@Michael_B You didn't find the answer clear, or you didn't think the answer applied to this question? I assume you mean the latter, in which case, questions about specific implementations typically should be closed as duplicates of the same broader question. E.g. "how to go from 4x1 to 2x2", "how to go from 8x1 to 4x2", etc. should each be closed as a duplicate of "how to reorder the number of items per row". That is why there are 100,000 questions about null reference exceptions closed as dupes of the canonical. — TylerH, Mar 15 '18 at 14:47
@Michael_B Granted, the answer to that question is written in Sass, but most code sandboxes allow to you paste in Sass and compile it to CSS with the click of a button. — TylerH, Mar 15 '18 at 14:48
@TylerH feel free to re-close this question if you feel strongly about it as a dupe. That was just my view (the answer there is really not that great), but no big deal. — Michael Benjamin, Mar 15 '18 at 14:49
Possible duplicate of [How to control number of items per row using media queries in Flexbox?](https://stackoverflow.com/questions/31621257/how-to-control-number-of-items-per-row-using-media-queries-in-flexbox) — TylerH, Mar 15 '18 at 14:50

VXp · Accepted Answer · 2018-03-15T15:48:37.200

You can do it like this:

body,
.outer,
.inner {margin: 0}

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

.inner {
  flex: 1;
  height: 200px;
  margin: 0 5px;
  background: blue;
}

@media (max-width: 480px) {
  .inner {
    flex: 0 1 calc(50% - 10px); /* - 2 x 5px left & right margin */
    margin-bottom: 10px;
  }
}

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

Transition flexbox grid from 4x1 to 2x2 using media query

1 Answers1