Making responsive grid elements fit by height - html

I'm trying to get my head around working with responsive webdesign (by column stacking) and I'm currently using this grid for my layouts: http://www.responsivegridsystem.com/ which I think works quite neat.
Only thing I'm running my head the wall with is to make it "smart enough" to also try and fit my columns by their height. What I have so far is this: http://gridtest.uconsult.dk/ and what I'm looking for is this: http://gridtest.uconsult.dk/gridheight.png so that the grid is trying to fit the rows by their height aswell as the column count.
Is this possible in some way? :-) Should I by using some other grid for this or do I have to make up some hacky javascript to achieve what I want?
Thanks in advance.

Don't reinvent the wheel! David DeSandro already put out a couple jquery plugins that will do this for you. Masonry was the first one and works very well, and Isotope is the newer version that expanded on the original thinking along with additional features like sorting. Both will do a good job of creating the dynamic grid system you're hoping for.

Related

How do i definitively align dynamically sized content with CSS not fixed width?

I use to be a full stack web developer 15 years ago when CSS was budding. We of course used tables for everything. Well i'm back and really put some time into CSS because i have to say its cool.. But i find it AN ABSOLUTE RIDICULOUS PAIN to do some simple things that tables STILL do far easier and better than Divs with CSS. I've found dozens of alignment solutions online (Most that don't work or only work if you have fixed pixel size content, but only a couple few that just look nasty bulky and require additional header/trailer container html parent elements to properly center a simple element like a button or image. It just seems like the resulting CSS is far more of a work around than what people claim Tables were. So my question is what is the simplest repeatable approach for dynamically aligning content with CSS (Aligning Right, Left, Center...Both vertical and horizontal.)?
I will keep this answer short and simple.
The Best Way
Use grid. It's the most robust css stuff out there. With tons of customization, you can make the page look nearly exactly the way you want. It's a 2-dimensional system. Well, the configuration can sometimes takes a bit pain. If the layout is pretty simple and speed is of essence, try flex
The best resource: https://css-tricks.com/snippets/css/complete-guide-grid/
The Easy Way
Use flex. It's an efficient, simple way to go for if your layout isn't too demanding. Relatively easy to setup. It's 1-dimensional system, however. If you're looking for complex grid, you're barking the wrong tree. Try grid.
The best resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
These are the ones that I always use. I have also outlined a simple tip when you would want to go for one over other. It's worth mastering both. Trust me. Hope this helps.

Styling HTML/CSS to Achieve the Given Effect

I'm using fancyBox3 in a project and I want to achieve the following:
I wanted to know if there is a CSS trick to achieve it or if it requires some math and calculation to make it fit perfectly?
Basically, there are two ways - using JS (there are ton of scripts, for example https://github.com/brunjo/rowGrid.js, https://haltu.github.io/muuri/, https://github.com/kombai/freewall, http://miromannino.github.io/Justified-Gallery/) or CSS.
The problem with CSS is that it is still not possible to create true "masonry style layout", but you can archive something similar, try googling for "masonry using css", you will find many articles and examples about this topic, for example, this one - https://medium.com/#andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb
Have a look at masonry.js - it does all the calculations for you to make your images tesselate as you resize the screen etc.

Angular 2 Masonry alternative

I've tried angular2-masonry, but unfortunately I get most of the problems what won't be solved ever because the project is dead...
I need something which is able to automatically put order my elements like this:
As you may see I only have 2 columns (and yes, when I took the picture the masonry worked, but unfortunately it doesn't work correctly at page load, and I can't build prod with it...) and I need to stack the elements together without any gap between them.
I only need to get something with the functionality of Masonry because my Width is fixed, only the element's high can change.
Thanks for the answers!

CSS/HTML - Displaying products with responsive layout

I have an assignment to display products in specific way that needs to be responsive as well,
this is what I need to achieve:
In your opinion and experience, in order to achieve that what method will you use?
Bunch of divs? table? ul/li?
I need little bit of direction before I'll start encoding the image. and I'm looking
for the most efficient way for the responsive design.
The most efficient way can only be done using bootstrap. A starter guide is found on the following site
http://getbootstrap.com/css/#tables
Just load the libraries in you project at the appropriate places and apply the classes to your tags to get the most responsive design you want.

Bootstrap Columns with height defined as percentage of row width

Complex Grid Layout, Help!
I'm making a responsive website using bootstrap 3.0.2 and can't figure out the layout that is stated in the requirements document for the project. I made an image of what I need, and will give more detail, or update my question, if needed. I am open to any suggestion on how to accomplish this.
The Issue
This image describes what I need the design to look like at three different widths.
I should add, each box will be basically a div with an image, article title and summary within it.
Like to say ... in advanced
Id like to say thanks and apologize in advanced if the question is dumb or the answer is obvious. I have been a dev for a long time, but I'm new to responsive design and I've been banging my head on the wall trying to get this to work
The problematic part of your project is to make two smaller blocks side with a bigger one and make these two 50%. As far as I know, there are no mature cross-browser solutions that would accomplish that without javascript.
You may want to take a look at: Flexbox and for Comrade IE Flexie.
Another approach to accomplish the same could be using viewport dimensions. Just be aware of the browsers support.
All in all, if you can do that, I would suggest just using JS, with a fallback to css that will not break the site's look too much. Having just finished a project with similar requirements, I would just like to say good luck.