Push two elements onto the same row if there's enough space with CSS?

Question

In this jsfiddle you'll see that there's enough space for a third block under the second block. Is it possible to push the third block under the second block so that there's only two rows?

https://jsfiddle.net/byokdm8o/

.list {
  display: flex;
  flex-flow: row wrap;
  width: 20rem;
}

.item {
  height: 5rem;
  width: 5rem;
  background-color: blue;
  margin: .2rem;
}

.item:nth-child(1) {
  height: 10rem;
  width: 10rem;
}

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

not with flexbox: http://stackoverflow.com/a/39645224/3597276 — Michael Benjamin, Feb 08 '17 at 22:39
If they don't need to be flex then just old-school left floats work. — Alejalapeno, Feb 08 '17 at 23:03

score 2 · Accepted Answer · answered Feb 08 '17 at 23:12

If you float the .items left, they'll stack that way.

.list {
  width: 20rem;
}

.item {
  height: 5rem;
  width: 5rem;
  background-color: blue;
  margin: .2rem;
  float: left;
}

.item:nth-child(1) {
  height: 10rem;
  width: 10rem;
}

<div class="list">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

score 0 · Answer 2 · answered Feb 08 '17 at 23:10

0

With such margins between those elements, the solution might be:

.list {
  width: 20rem;
}

.item {
  height: 5rem;
  width: 5rem;
  background-color: blue;
  margin: .2rem;
  float: left;
}

.item:nth-child(1) {
  height: 10rem;
  width: 10rem;
}

answered Feb 08 '17 at 23:10

Plenarto

639
3
16

score -1 · Answer 3 · answered Feb 08 '17 at 22:34

-1

you need to use flexbox. i am sure there are other ways as well, but here is an amazing tut on flexbox if you are interested: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

answered Feb 08 '17 at 22:34

macbeth

138
1
10

Push two elements onto the same row if there's enough space with CSS?

3 Answers3