Make some items twice the height in a flexbox grid

Question

I'm trying to create a simple flexbox grid with two columns, however with the option of declaring one of the children as "featured" making it twice the height of the normal children, so given the following markup:

<div class="container">
    <div class="child featured">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
</div>

You'd end up with something like this (margins/padding/border for illustrative purposes only):

However I can't seem to get it to work, the children all just stack under the featured child rather than fill the available space.

My basic CSS is:

.container {
    display: flex;
    flex-flow: column wrap;
}

.child {
    flex: 1 0 50%;
    height: 50vh;
    max-width: 50%;
}

.child.featured {
    height: 100vh;
}

Any idea what I'm doing wrong, or if there is a better approach to this (without resorting to JavaScript)?

what is the question? featured div should be twice heighted because of height: 100vh css rule. — Eduard Void, Jun 01 '17 at 13:00
@EduardVoid The heights work, but the children do not fill the available space, they just stack under the featured child. — Bobe, Jun 01 '17 at 13:08
you can't do that without nested flexboxes. You can create one flexbox inside container, which will hold only children 1,2 and 3 — Eduard Void, Jun 01 '17 at 13:18
to grow or shrink elements you should define the container size — Eduard Void, Jun 01 '17 at 13:18
With flexbox, this sort of grid requires a fixed height on the container. You can then use `column wrap` to position the items. Otherwise, for a simpler solution you can use CSS Grid Layout. — Michael Benjamin, Jun 02 '17 at 01:55
@Michael_B I can't use a fixed height container because it can contain an unknown number of children, but I would be interested to see how a CSS Grid solution might work. — Bobe, Jun 02 '17 at 01:58

score 2 · Accepted Answer · answered Jun 01 '17 at 13:22

2

Flexbox doesn't support such grid. But you can do it using floats:

.child {
  float: left;
  height: 50vh;
  width: 50%;
  outline: 1px solid red;
}

.child.featured {
  height: 100vh;
}

<div class="container">
    <div class="child featured">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
</div>

answered Jun 01 '17 at 13:22

Yevgeny

81
1
3

I was hoping to avoid floats, but it seems like this may be my only option for the time being. – Bobe Jun 01 '17 at 13:41
You can try to use CSS Grid for modern browsers and floats for old – Yevgeny Jun 01 '17 at 14:02

score 2 · Answer 2 · answered Sep 13 '17 at 13:22

Any idea what I'm doing wrong, or if there is a better approach to this (without resorting to JavaScript)?

The problem is that flexbox is not designed to create anything more than simple grids. Once you ask for something like a masonry layout (which is what you're after), you'll need hacks and workarounds for flexbox to complete the task.

However, this layout can be achieved easily in CSS Grid:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.child.featured {
  grid-row-end: span 2;
}


/* non-essential decorative styles */
.container {
  padding: 10px;
  border: 2px solid gray;
  background-color: lightgray;
  height: 50vh;
}
.child {
  background-color: deepskyblue;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
}

<div class="container">
  <div class="child featured">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
</div>

jsFiddle demo

For a complete explanation of the problem when using flexbox, and how the Grid functions work, see this post:

CSS-only masonry layout but with elements ordered horizontally

Make some items twice the height in a flexbox grid

2 Answers2

jsFiddle demo