The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other grid system feedback Reply To: grid system feedback


Okay, I’m trying not to get too fragmented, here. This is a design (in the engineering sense) oriented question and will apply to either the table or inline-block based plan. Plus, I am writing this as a sass module, so in the end I’ll be able to use it how I like regardless of what I choose here.

As you’ve seen in the demos, I am using a “xofy” attribute value scheme for predefined column widths. “1of4” would be 25% wide, “6of12” would be 50% wide, and so on. I am planning on predefined y values of 2-12, or maybe through 16, and x values from 1-y.

My original idea was to make the system mobile-first, with all columns having 100% width by default and then getting their “grid” widths at a certain breakpoint.

Now, this is how I got trapped by my own logic:

Should a “xof4″ column become full-width at the same breakpoint as a “xof16″ column? Probably not, right? So, here’s a new idea: three or four breakpoints, and they kick in for different rows based on the y value. So, “1of4” and “3of12” are both 25% wide, but they switch to their “mobile” (full-width) display at different breakpoints.

From there, it only makes sense that you could assign multiple values to a column, maybe like “1of2 1of4 1of12”, and have each break at a different point: so on large screens the column would be 8.33% wide, on mid-size screens this same column would be 25% wide, 50% on smaller screens, and full-width on very small screens.

From a technical standpoint, I like this very much, and I have figured out how to do it. My question for all of you is whether anyone thinks this is worth it.

  1. Would you like a grid system that give this kind of fine control? would these features see much use?
  2. Since it is sass and you can do it any way you want manually, do you think it is useful to have this kind of system predefined?