Anyone interested in grid layouts on the web should probably take a look at the native CSS Grid Layout feature[0]. Unlike existing solutions it doesn’t require rigid HTML structure or extensive class usage of questionable semanticity.
It might not be too practical if you’re building something here and now, given that spec drafts are subject to change. On the other hand, there are polyfills already and full browser support seems to be on its way.
Each item has 16 CSS classes (!) attached to it: 2 for the position, 2 for the dimensions, times 4 for each breakpoint.
It sounds unusable to keep track of all these classes (even with preprocessors) but the drag'n'drop feature changes everything, and makes this an excellent tool to create a landing page builder.
As this was created mainly for a "landing page builder" tool, the assumption was that classes are added dynamically with a scripting language so its not that big of a problem. I did think quite a bit on how to minimize the clutter and I either had to do a colossal CSS file with all the permutations or a smaller css and a bit more text in the html. Sadly I am not aware of a way how make both of them reasonably small (few css rules and few css classes in the html) - if anybody has an Idea I would be very grateful.
Yeah that was my thought process: "Wow there's a lot of CSS classes. But the drag'n'drop builder makes this number irrelevant."
I'm actually working on updating a landing page builder today, so the timing is perfect. I don't think you can reduce the number of classes in the HTML but that's fine. Maybe have a Sass mixing to generate the CSS cases.
In the end, the size of both the HTML and CSS are negligible considering everything is auto generated.
<rant>Yet another grid implementation that requires jQuery.</rant>
My last search on responsive grids (June 2015) has not turned up anything without jQuery. That would be a cool new "feature", that none of the existing solutions so far offer.
Yeah I was thinking about removing the jQuery dependancy, as I don't "really" need it here - all of the heavy logic is implemented outside of jQuery and I used it mostly for easy event delegation and data attribute handling. I might work on a version without it, but I wanted to get this working as soon as possible and jQuery does help in code size reduction and ease of development.
Also this grid works without any javascript (pure css) so you only need javascript for drag'n'drop reordering
It'd probably be preferable to have jQuery and various libraries that depend on it to having different, slightly different variations on things jQuery does from each library you include.
Looks nice! But I think I found a bug: In the static html demo with a small window (xs), the cells 4+5 and 11+12 have no white space between each other. Chromium 43.
Well yes it should, though to be honest I just added the touchmove events and called it a day, it works on the few handhelds I have available for testing, but there certainly could be some issues on devices I didn't test it on. Any feedback and github issues are censiarly welcome :)
It might not be too practical if you’re building something here and now, given that spec drafts are subject to change. On the other hand, there are polyfills already and full browser support seems to be on its way.
[0] A nice overview I stumbled across recently: https://medium.com/@patrickbrosset/css-grid-layout-6c9cba6e8...