Flexbox 2x2 grid issue

Question

I'm trying to achieve design like shown below using CSS. Unfortunately all my efforts are worthless. Whatever I try it always seems to work for only one line (only 2 divs) instead of two lines. I'm using wrap attribute. What am I doing wrong?

edit: in this case I can't use nested flexboxes

Desired look:

<div style="width:400px;height:100%;background:#cacaca;
    display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;-moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
">
<div style="width:200px;height:200px;background:#ff0000"></div>
<div style="width:100px;height:100px;background:#999;"></div>
<div style="width:100px;height:100px;background:#666;"></div>
<div style="width:100px;height:100px;background:#444;"></div>
<div style="width:100px;height:100px;background:#222;"></div>


</div>

Achieving that layout with Flexbox will be tedious. Consider using CSS Grid instead. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout — Ryan, Jul 22 '17 at 17:38
do you need the spacing? or are you just looking for something like this? https://codepen.io/mcoker/pen/EvYeNx — Michael Coker, Jul 22 '17 at 17:45
@MichaelCoker spacing is not necessary, but unfortunately the overall structure is. I mean I'm trying to use this code as a part of responsive layout which is dynamically created. When I add anything more to the code it does not render properly. — B. Palka, Jul 22 '17 at 17:50
You are going to have a great deal of difficulty duplicating that without nested flexboxes. CSS grid is the better option here. — Matt, Jul 22 '17 at 18:24
Does it have to be flexbox? I think you can do that with floats. — Michael Coker, Jul 22 '17 at 18:48

score 0 · Answer 1 · answered Jul 22 '17 at 18:13

I'm not sure if this is what you want, but simply wrap the four 100px div's.

<div style="width:400px;height:100%;background:#cacaca;
    display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;-moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
">
    <div style="width:200px;height:200px;background:#ff0000"></div>
    <div style="width:200px;height:200px;background:#ff0000
                display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;-moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;">
        <div style="width:100px;height:100px;background:#999;"></div>
        <div style="width:100px;height:100px;background:#666;"></div>
        <div style="width:100px;height:100px;background:#444;"></div>
        <div style="width:100px;height:100px;background:#222;"></div>
    </div>
</div>

I've forgotten to mention, but I can't use nested flexboxes - dynamically created responsive webpage I try to change breaks while changing code structure. Is there any other way to accomplish such a design? — B. Palka, Jul 22 '17 at 18:23

Gerard · Accepted Answer · 2017-07-22T18:26:12.463

Using nested flexboxes.

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  width: 400px;
}

.row:not(:last-child) {
  margin-bottom: 1em;
}

.bigbox {
  width: 200px;
  height: 200px;
  background: #ff0000;
}

.boxes {
  width: 200px;
  height: 200px;
}

div[class^="small"] {
  width: 100px;
  height: 100px;
  float: left;
}

.small-999 {
  background: #999;
}

.small-666 {
  background: #666;
}

.small-444 {
  background: #444;
}

.small-222 {
  background: #222;
}

<div class="row">
  <div class="bigbox"></div>
  <div class="boxes">
    <div class="small-999"></div>
    <div class="small-666"></div>
    <div class="small-444"></div>
    <div class="small-222"></div>
  </div>
</div>
<div class="row">
  <div class="bigbox"></div>
  <div class="boxes">
    <div class="small-999"></div>
    <div class="small-666"></div>
    <div class="small-444"></div>
    <div class="small-222"></div>
  </div>
</div>

I've forgotten to mention, but I can't use nested flexboxes - dynamically created responsive webpage I try to change breaks while changing code structure. Is there any other way to accomplish such a design? — B. Palka, Jul 22 '17 at 18:22
Code is adjusted. The inner flexbox is removed and 'good old' floats are used for the small boxes. — Gerard, Jul 22 '17 at 18:26

Flexbox 2x2 grid issue

2 Answers2