Anyone here use 12 column grids?
I'm learning a lot about 12 column grids and they seem great for design, but I'm not sure how practical they are to set up in css from project to project. It seems like a very different approach to the way I usually set up my css. Anyone have advice and/or repositories or tutorials to get started with a grid system?
6 Replies
I found this article which is super helpful https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout. Curious still about your opinions!
Realizing common layouts using grids - CSS: Cascading Style Sheets ...
To round off this set of guides to CSS Grid Layout, we're going to walk through a few different layouts, which demonstrate some of the different techniques you can use when designing with grid layout. We will look at an example using grid-template-areas, a typical 12-column flexible grid system, and also a product listing using auto-placement. A...
In the before times, this was a very common practice, but not really anymore
for learning design, I think a 12 column approach is excellent because it enables people to quickly understand how to proportion sections that will work great in a responsive layout
but for coding, it no longer makes any sense.
How do you translate a 12 column design into code then?
From my understanding 12 column layouts in design are still used
I guess my line of thinking is, if I design something using 12 columns, or really any number of columns, to strike balance and scale in a design, how am I able to translate that over to my css? Surely eyeballing is isn't what's done right? There's got to be some measured way to achieve this (like following a grid system). If 12 col grid isn't really used anymore, what do devs use then to make a balanced website?
let's say you have designed a few different sections for your page that use cards. One set of cards has a row of 3, and another section uses say 4, and maybe another that has only 2
in the design phase, you can make that really easy with a 12 column layout, because you know how many columns each will take (divide by 3, 4, or 2)
but when it comes to code, you don't want to set up a custom grid with 12 columns, and then have to span these cards across them to get their widths
that creates way too much work, when you can just use a standard grid and specify how many units you want (like 1fr, 1fr, 1fr) etc
and as far as how do you achieve good spacing, my recommendation when you are starting out is to only use multiples of 8px
so make your gaps always be 16 / 32 / 48 etc, and your grid content be like 64 / 80 / 160 etc
in the end, it's most important to remember, you aren't going for a pixel perfect design, but rather one that is proportionally accurate across a wide range of viewports. So, actually, 'eyeballing it' is a pretty big part of it 😄
I think you're better off using CSS Grid and Flexbox from the start because those are the tools you're going to be using and you aren't tied to a specific CSS frameworks
I've seen way too many people try out bootstrap as an easy way to get into web development who are then stuck seeing every problem as being solvable with a bootstrap wrench. Play around with the tools CSS provides and then use a framework that gives a 12 column layout if you want
Thanks guys!!