2x2 Box Beside 1 Big 2x2 Size Box Using Css

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 clear:lefts

Solution 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;
}

<ulid="test"><liclass="item">
  A
  </li><liclass="item">
  B
  </li><liclass="item">
  C
  </li><liclass="item">
  D
  </li><liclass="item">
  E
  </li></ul>

Solution 2:

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: 00calc(100% - 20px);
  margin-left: 0;
  width: 50%;
}
.item:not(:first-child) {
  flex: 00calc(50% - 20px);
  width: calc(25% - 20px);
}

<ulid="test"><liclass="item">A</li><liclass="item">B</li><liclass="item">C</li><liclass="item">D</li><liclass="item">E</li></ul>

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;
}

<ulid="test"><liclass="item">A</li><liclass="item">B</li><liclass="item">C</li><liclass="item">D</li><liclass="item">E</li></ul>

Solution 3:

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%;
}

<ulid="test"><liclass="item"><span>A</span></li><liclass="item"><span>B</span></li><liclass="item"><span>C</span></li><liclass="item"><span>D</span></li><liclass="item"><span>E</span></li></ul>

Solution 4:

U dont need flex.

#test {
  list-style:none;
  width:100%;
}
  .item1{
    width:50%;
    float:left;
    height:300px;
    background-color:red;
  }
.item {
  width:25%;
  float:left;
  background-color: #444;
  height:150px;
}

https://jsfiddle.net/rL7rqp1r/3/

Solution 5:

I am trying to solve this 2*2 box using flexbox. Please Saw the link.

<ulclass="box"><liclass="left">5</li><ulclass="right"><li>1</li><li>2</li><li>3</li><li>4</li></ul></ul>


    .box{
  width: 500px;
  height:100%;
  display: flex;

}


.left {
  width: 200px;
  height:200px;
  background: #000;
  list-style:none;
}

.right{
  display: flex;
  flex-flow:wrap;
  justify-content: space-around;

}

.right li{
  width:95px;
  height:95px;
  background: #000;
  margin: 5px;
  flex:1 1 50;
  list-style:none;
}

Jsbin