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

Something like this

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

#test {
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

.item {
  width: 33.33%;
  float: left;
  padding:5px;
  height:100px;
  color:#fff;
}

.item:first-child {
  height: 200px;
}

.item>span {
  background-color: #444;
  display: block;
  height: 100%;
}

  

    A
  
  

    B
  
  

    C
  
  

    D
  
  

    E