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 clear:lefts and combination of float:left and rights. But somehow the last square tends to drop on a single row itself.

HTML:

<ul id="test">
  <li class="item">
  A
  </li>
  <li class="item">
  B
  </li>
  <li class="item">
  C
  </li>
  <li class="item">
  D
  </li>  
  <li class="item">
  E
  </li>
</ul>

CSS:

#test {
  list-style:none;
  width:100%;
}
.item {
  width:33%;
  float:left;
  background-color: #444
}

Fiddle here

related: http://stackoverflow.com/questions/38351887/large-first-item-with-a-flexbox-layout — Danield, Apr 26 '17 at 09:21

score 2 · Answer 1 · answered Apr 26 '17 at 06:22

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

<ul id="test">
  <li class="item">
  A
  </li>
  <li class="item">
  B
  </li>
  <li class="item">
  C
  </li>
  <li class="item">
  D
  </li>  
  <li class="item">
  E
  </li>
</ul>

You're right about flexbox, it's not meant for creating grids. Great answer using CSS Grid Layout. — Michael Benjamin, Apr 26 '17 at 16:57

score 1 · Answer 2 · answered Apr 26 '17 at 06:02

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

<ul id="test">
  <li class="item">
    <span>A</span>
  </li>
  <li class="item">
    <span>B</span>
  </li>
  <li class="item">
    <span>C</span>
  </li>
  <li class="item">
    <span>D</span>
  </li>
  <li class="item">
    <span>E</span>
  </li>
</ul>

Nenad Vracar · Accepted Answer · 2017-04-26T10:11:48.443

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

<ul id="test">
  <li class="item">A</li>
  <li class="item">B</li>
  <li class="item">C</li>
  <li class="item">D</li>
  <li class="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;
}

<ul id="test">
  <li class="item">A</li>
  <li class="item">B</li>
  <li class="item">C</li>
  <li class="item">D</li>
  <li class="item">E</li>
</ul>

score 0 · Answer 4 · answered Apr 26 '17 at 06:10

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/

score 0 · Answer 5 · answered Apr 26 '17 at 06:39

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

<ul class="box">
   <li class="left">5</li>
   <ul class="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

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

5 Answers5

Linked

Related