I am looking for a way (jQuery plugin perhaps) to create a grid of variable height, fixed width divs. Something used in Pintrest.com for those of you familiar. Using inline elements or inline-block would cause gaps. It appears pintrest.com uses absolute positioning, put I'm lokking for a way to detect size and align elements accordingly.
http://pinterest.com
jQuery Masonry is a good place to look for something more off the shelf - http://masonry.desandro.com/. There's also a quora thread on the topic - http://b.qr.ae/wcGASb
Related
I'm looking at creating a grid for a day view of a calendar, where the items are vertically positioned and sized according to their start and end times. If an agenda item doesn't overlap with anything else, its width will span the full width of the column; however, if items overlap, they split the width between them. Example images below:
Full-width items, no overlap
Overlapping items
Clearly, this can all be calculated using Javascript with full knowledge of all the meetings at once. However, I'm wondering if there's an elegant CSS solution to handle this, where the code needs to only provide the vertical position and height?
I ask because I'm hoping to organize my React code such that each grid box only needs to know the data for its own agenda item, keeping good encapsulation; rather than needing to pass in a bunch of data (pre-processed or not) about other items.
This sounds like a perfect use case for flexbox. Which also plays nicely with React.
Bootstrap V4 can be used with flexbox. Another good option if you are using PostCSS is lost grid.
Using Angularjs Material framework, I aligned the content (containing cards) to the center, the problem is when I increase the height of one card, the height of the adjacent card also increases. Example code http://embed.plnkr.co/eaLjJDbjL1KnOI4jLYyO/preview
The cards will have dynamic height, and should align one after another both horizontally as well as vertically.
I am trying to achieve some thing like this:
https://lh3.googleusercontent.com/-6ocJpsXmVLU/VTgSj9wd_CI/AAAAAAAAACs/PavEWs9wiGM/s1600/cardLayout.png
I don't think this has anything to do with Angular. It looks like your example is using flexbox CSS, which is the cause of your columns having equal height. Remove all the flex attributes and your cards will take take the height of the contained content. If you are looking for a masonry tile layout you'll likely need JavaScript to help with that since elements float left and clear one another. Take a look at this and see if this helps http://masonry.desandro.com/
I have elements structured roughly like this: http://jsfiddle.net/zyySd/
Is there any way to achieve this: http://jsfiddle.net/zyySd/1/
without resorting to taking the elements out of the document's flow and hardcoding absolute positioning values? In the case that I don't know what the dimensions of the divs are, I would not be able to use absolute position as I did in the second JSFiddle.
CSS can't really do it. You need JavaScript.
jQuery Masonry is good: http://masonry.desandro.com/
There's also a no-framework version, Vanilla Masonry: http://vanilla-masonry.desandro.com/
Ideally I would like to have divs aligned in a more intuitive way, see the fiddle: http://jsfiddle.net/stefek99/jZB2q/
I'm thinking about "get computed style" to compute heights and then change order of columns but I think it's overkill. Is there any simple strategy to make this CSS layout more aligned?
Thanks
Take a look at the jQuery masonry plugin. It does exactly what you're looking for.
You can use inline-block to have them pack in rows of equal height.
You can give even elements float:left and odd ones float:right for less terrible packing.
How can I achieve the same effect as jQuery Masonry, but horizontally? I.e., I'd like to arrange elements of different size in a brick-like layout that minimizes white space, where the container is of fixed height, and new elements will be added horizontally.
You can use the jquery plugin Isotope. It allows for this exact functionality along with a very robust interactive api.