8 years ago from Jaskni Wong, Visual Designer @ frog
For Web Design, what’s your favourite Grid System? 960PX? 1140PX? Or another one?
I love the 960 Grid System, I designed so many website with it, but it nearly obsolete? I want to find the new one and need your opinions :)
The one that fits my design best
Such a useful comment.
such a usefull thread. Just like the other 100 threads about gridsystems
Yep, because of that we create a special grid for each project. It's not that hard. : )
Every project needs fresh thinking.
Thanks man, agree with you.
I prefer Neat.
+1 - Bourbon + Neat is great.
I also prefer Bourbon Neat and we use it for the majority of our projects. In order to speed things up, we ported both Bourbon and Neat to a Node-Sass, a Node.js wrapper of LibSass. This way, it can be used with gulp.js, Grunt, and other Node.js-based build tools.
The repos for both of these can be found here:
We also published a short blog post about how to use it, which can be found here.
Yep, I'm loving this grid to death. I'm using it for my personal website re-design and it makes things so much easier and faster.
<table>
My favourite way of implementing a grid is Susy, or something hand-rolled if it's a very simple site.
The grid itself changes per layout. My default is 12 columns, and I often go with Bootstrap's break points, despite not using Bootstrap itself.
Susy is where I'm moving to after using Bootstrap for a few years. I got the point where I don't really use anything in Bootstrap except the grid system, and even then I end up writing media queries to manage the breakpoints better. Hand-rolled is really the most effective way if you're not prototyping.
Totally agree. I do try using Bootstrap or Foundation every now and again, but I just end up finding it more frustratingly limiting than anything else.
Susy is crazy customisable once you understand the syntax, it's one of the few frameworks which manages to balance power and customisation correctly IMO.
I use a 1px grid system.
lol. Dig it.
Awesome Bevan!
I use bootstrap mostly at work. Chris Coyier has a nice post about not over thinking gird systems: http://www.css-tricks.com/dont-overthink-it-grids/
Finally, I found the one who using bootstrap. So do I. I just use it because it's simple. Just it
i don't understand why people are adding extra markup to their HTML documents for building grids.
i'm using Jeet right now. it just works.
Separation of concerns. When you build things that are modular in nature, you want to separate page/template structure from the modules that you place within that structure. It makes thing inherently more re-usable.
Whenever I design, I don't use a set grid system. The responsive nature of the web means you can start out with a 1200px 12 column grid, knowing that columns will be dropped, etc. I tend to use a 1200px grid and then just do what looks the best for smaller screen sizes (stacking, hiding, dynamic font sizing).
The size of the layout entirely depends on the design/context.
Using Gridle a lot lately. Love it.
Since 2014 I still use 1440px grid with no gutter.
Desktop HD: Around the 1500px mark. Desktop: Around 1160-1200px. (depending on the gutter between items and how much columns I need, I mostly try 12/24 columns)
Tablets: Around 750px (starting to calculate in percentages) Mobile: 320px, 2 columns mostly.
Have you checked out Semantic UI's Grid? http://semantic-ui.com/collections/grid.html
Used to use Bourbon + Neat, but the time it took to compile for local projects killed it. Before that, Skeleton, but it wasn't suitable for half the projects where I was trying to use it. Used SmartGrid, but the percentage gutters created subpixel blurring in Safari. Now using Toast — loving it so far.
+1 on Toast.
I really like how Bootstrap handles grids and responsive layout for small- to medium-sized websites. I used Bootstrap's sass port to create my own tiny version, containing only the grid (but with 24 columns) and some responsive utilities (including an extra breakpoint).
8px grid.
Don't be redicilous. 9px grid ftw.
Sometimes I crank it up to 11px
I still use 960.gs on most projects (unless a Corporate Identitu has their own grid system)... Make it bigger for bigger screen sizes.Still very useful.
Semantic.gs. Only one you'll ever need.
I think it depends on how much content and the experience your or your client wants your users to have. For Blogs I tend to use a much narrower grid on desktop because I don't want the user to have to read all the way across the screen. For a complicated dashboard/login I've gone as wide as 1140 because there was a lot of stuff that needed a place. I think it's important to define what your content is first. If all you are building is one type of site, then find a grid that is flexible enough to allow you to change it when you have the need.
Once we determine where we are going I like to use Guide Guide to help figure out my 12 column grid. http://guideguide.me/ Then we'll adjust the Foundation Zurb grid to accommodate.
I've been meaning to try Flexbox Grid. Has anyone used this before?
Flexbox is incredible, I use it on any project that doesn't require IE support.
I've tried several systems, Neat, Foundation— and for bigger projects I think they work really well.
For smaller projects, quick prototypes, etc. I've been using calc() to roll my own. It's easy to implement, you can make your mixin for it— it has partial IE9 support.
I would love people's thoughts if you're using it (or something similar) too:
Intro: http://webdesign.tutsplus.com/tutorials/calc-grids-are-the-best-grids--cms-22902
Mixin for it: http://www.sitepoint.com/creative-grid-system-sass-calc/
Clearly purecss.io. There's nothing better out there.
I'm a big fan of http://sam.roon.io/my-grid-system
Have been using it for
http://thanksalot.cohttp://midddle.co/http://graphicalcooking.co/http://agentalice.com/
Works like a charme, eliminates the overhead of grid-7 and grid-1 (really, have you ever used these?) and the best thing is: One breakpoint really IS more than enough.
If we're talking about CSS Grid frameworks, I quite like https://github.com/necolas/griddle.
It's a nice little SASS helper that allows you to create the specific grid system and classes you need for your project (I really hate overbloated CSS frameworks)
Desktop - 1200px 12 col 20px gut, then increase the canvas to 1920px width.
This has been covered a lot.
Using Gridle right now, it's just great! Cheers :)
Not for every project, but sometimes it's enough to use CSS Tables:
gridsetapp.com
The Skeleton Grid: http://getskeleton.com/
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now