2x2 Box beside 1 big 2x2 size box using css

Question

Is it possible to make like on a ul li structure with flexbox? I tried making the squares width set on 25% and the 1st, 3rd or the 5th one to 50% width with a trick of

Answer 1

It is possible to do this with Flexbox but you need to set fixed height on flex-container element or ul in this case. Then you can use flex-direction: column and flex-wrap: wrap to make items break to new column when maximum height is reached.

Also if you want to use margins you need to include them in in height using calc()

#test {
  list-style: none;
  display: flex;
  flex-direction: column;
  height: 300px;
  flex-wrap: wrap;
  padding: 0;
}
.item {
  background: #CF509D;
  margin: 10px;
}
.item:first-child {
  flex: 0 0 calc(100% - 20px);
  margin-left: 0;
  width: 50%;
}
.item:not(:first-child) {
  flex: 0 0 calc(50% - 20px);
  width: calc(25% - 20px);
}

  
A
  
B
  
C
  
D
  
E

And here is how you can do this using Grid-layout

#test {
  display: grid;
  min-height: 300px;
  grid-template-columns: 50% 1fr 1fr;
  list-style: none;
  padding: 0;
}
.item {
  background: #D04E98;
  margin: 10px;
}
.item:first-child {
  grid-row: 1 / 3;
}

  
A
  
B
  
C
  
D
  
E