I would like to create something like this: https://www.apptrendit.com/
But I would like to create it using a bootstrap
to make it responsive, the problem is that the columns have different sizes and are not linear as when one works with the columns in bootstrap
, how can I do this?
My Attempt: https://jsfiddle.net/370z66u2/
As far as I know,
boostrap
it's not possible with pure css. At some point in the documentation it says something like this:Since you have different dimensions in the images, I leave you with an example using Masonry , it is a library to make self-organizing grids. Here you have an example made with this library.
To use Masonry in your
fiddle
you must:Include JQuery and Masonry:
Initialize the grid:
Here I have modified your fiddle: https://jsfiddle.net/91ydtqy1/
You can do something similar to what you're looking for with pure CSS using
column-count
. Withcolumn-count
you specify in how many columns you want the content of an element to be displayed. So, if you set elements to 100% width, they will take up 100% of the width of the column instead of 100% of the width of the container.Here you can see a simple working example:
Two drawbacks of this method:
It won't work on older versions of IE (requires IE10 or higher) and you may need the browser prefix for older versions of Chrome/Firefox.
The elements are ordered vertically (you can see it in the example above), if you want them to be ordered horizontally you will have to do it before displaying them because at the moment there is no such option in pure CSS.