How I learnt to love grids / by ciro correia

I had a love/hate relationship with grids during my Graphic Design/Art studies, I wasn't the only one. Nowadays my relationship with grids is much more love than hate. A grid of course is just a tool, and learning not to be robotic and mixing things up takes time when working a layout with a grid in mind. Grids are extremely flexible but because they can technically impose order, they can feel like they hamper the freedom of creative flow. This however is only a perception, grids are not meant to be a rigid formulaic mill-stone around your neck but can allow an infinite amount of creative expression when used as a tool. It's that age old maxim: Learn the 'rules' before you are allowed to break them. There's another reason I like working with grids, it's one of my only opportunities to use those Math skills I spent all that time learning over my school career. I find it refreshing to use Math skills in design. The only way to get grids to work for you has very much to do with getting the numbers right, and make sure that the developer you're handing over to understands the dimensions or ratios you have built your design on. Of course alternatively if you are building that email template or web page yourself  it's crucial to understand the units of measure used in html/css and how space is organised within a web page layout using css.

There are many different kinds of grids: single-column, multiple column, modular and Hierarchical grids. They all have contexts where one is better suited to a design than the others. They can be used in almost any project from posters, books, exhibition graphics to websites. So whether in print or on screen, grids are awesomely helpful in creating order and Unity. I've placed the grid and high fidelity design side by side for a proper look at the two. After orientation, research and analysis - as always I begin a design, illustration or animation on paper, thumbnails and sketches. After this conceptual stage, visual designs begin their digital life in their primary transition off of the paper page as a wireframe or low-fidelity version of the design. Iteration towards a high-fidelity design and hand-off depends on what kind of workflow I'm involved in, but the usual deliverables are often involved. Style sheets, marked up designs or elements in a pattern library.

The landing page below is a hierarchical or horizontal grid with the hierarchical groupings in a multicolumn or modular arrangement. If you know what you're looking for you can see the underlying structure. Designers are aware of these tell-tale signs, but most users experience the page sub-consciously, being led or disrupted by the designer's cues. Check out the screen capture to see the page elements up close.

Any designer working on layout in html/css knows how frustrating it can be to build a page or email to accurately reflect the grid or design you've lovingly crafted, understanding how layout works in CSS and how this relates to the html structure allows one to build anything you visualise in your design. However the CSS gods have smiled on us designers lately! CSS Grids brings the way graphic designers work with grids into the web/digital space. CSS grids works on graphic design terms and allows us to divide the webpage space easily in the same way we work with our designs - also making pages responsive is as easy as having a mobile version of the CSS activate on a media query.

I'm one happy designer. See my post on CSS grids.