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

Flexbox is not meant for this usecase. With the help of flex you can only display one-dimensional structures like evenly distributing elments along the X- or Y-axis.

CSS-Grid is your new friend in this case..

As long as you don't mind the lacking support of some browsers, this should be the direkt solution.

(here the current support http://caniuse.com/#search=CSS%20Grid%20Layout)

#test {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-gap: 10px;
  
  list-style:none;
  padding: 0;
  margin: 0;
  
  height: 200px; /* just for demo */
}
.item {
  background-color: #D04E98
}

.item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

  

  A
  
  

  B
  
  

  C
  
  

  D
  
  
  

  E