Fixed-width, flexible-height css grid

Question

NOTE This is similar to this post, however there is a strict no-javascript requirement and the answer should be responsive (i.e there is not a fixed number of columns).

I would like to style several fixed width, variable height boxes using no javascript such that they form a kind of fluid grid. This jsfiddle yields the picture below. This is essentially just the following css:

div {
  float: left;
  margin: 1em;
  border: 1px solid #999;
  width: 150px;
}

boxes

I'd like for the only vertical empty space to be the margins. In terms of the screenshot above, I'd like for the tops of 5 and 6 to move upwards to 1em from the bottom of 1 and 2, respectively.

I am assuming that you do not know how many blocks there might be or the height of each, or both. The nature of float:left is not going to allow for your desired result without the ability to calculate the block height and respond to it. ie. jQuery/js — petebolduc
– petebolduc, Commented Jun 30, 2015 at 18:16
I'm not aware of any non-js solutions to this issue...even flexbox (AFAIK) doesn't offer any help here. That's why the JS solutions are so popular. — Paulie_D
– Paulie_D, Commented Jun 30, 2015 at 18:44
Using flexbox, I guess there's this. But yeah it doesn't quite cut it. — astex
– astex, Commented Jun 30, 2015 at 19:23
Using column-count, there's this. But that assumes a fixed width of the columns. It would be nice to have something more flexible. — astex
– astex, Commented Jun 30, 2015 at 19:26

g1ji · Accepted Answer · 2015-06-30 19:24:28Z

-3

it's not possible by using pure CSS because any how you have to know the current position of div so if you really wanna do this then you have to re position the <div> either using " margin-top " property of css or using jQuery like these jqueryhouse.com/jquery-grid-plugins

answered Jun 30, 2015 at 19:24

g1ji

1,1591 gold badge10 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Fixed-width, flexible-height css grid

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related