When planning a new website or a redesign of your existing site, like anyone, you want you’re your website to be something unique — a digital space that stands out and catches the eye while maintaining up-to-date aesthetics, or dare we say, an innovative feel? Many businesses looking for a modern, clean look to their website are frustrated by standard website design, and they are not wrong.

From a technical perspective, there are many roadblocks that can get in the way of designing the “perfect” website for a business. For one thing, making a responsive and well laid out website has become increasingly challenging given the ever expanding number of screen sizes and resolutions. Mobile readiness often makes content scale inconsistently across multiple screen resolutions. In addition, many low cost website providers today sell templates that provide “paint by numbers” solutions that end up producing websites that feel canned and unoriginal, or simply don’t meet your need.

What’s the solution to these problems? Flexible, grid based design.

What is Grid-Based Design?

Grid-based design is modern classic, a style that has been around, at least since “The New Typography” was published in 1929, but that may have examples all the way back to early forms of writing in clay tablets. is still just a relevant and important today. What is it? Well, a grid consists of invisible lines and areas that divide up a surface into smaller sections. These grids can divide the surface into vertical columns, horizontal bars, modular shapes or a combination of all of these and more. When you think of the columns in a newspaper, for example, or the panels of a comic book, you are thinking of rudimentary types of grid-based design.

Jan Tschichold's 'The New Typography' cover.

The grid brings visual appeal while also making it easier to design and place elements. They also provide the designer with an almost unlimited amount of flexibility. Since various grid shapes and elements can be moved around or substituted with others, mixing and matching them becomes a snap. Instead of boring, template-based designs that make all websites look virtually more or less the same, using grid-based designs gives you the ability to unlock an unlimited number of combinations. The result? A website that is truly and uniquely your own.

Dealing With Multiple Screens

Even with unique designs, the problem of screen resolution still arises. How can you design a website for one screen, like a laptop computer, and still have it look nice and engaging on a different type of screen, like a mobile phone? In the old days, this was a real problem that resulted in sites that were completely unreadable in certain formats, or led to make-shift solutions that didn’t really address the problem.

CSS Code on a computer screen

Today, however, this is not an issue at all. That’s because the search for usable, actionable grid-based design has led to improvements like CSS flex and CSS Grid.

Flexbox and CSS Grid

CSS Flex (aka Flexbox) and CSS Grid are two ways that web designers are able to take a site designed for one screen and have fit perfectly onto another, regardless of the differences in that screens’ overall size and resolution. Depending on your web content, either Flexbox or CSS grid can work for you. What’s the difference?

– Flexbox is primarily designed to adjust one-dimensional content, such as either rows or columns. If your site is primarily content-based or linear in its approach, then Flexbox is usually the better choice. This will allow you to fit your content onto any screen, still in order, while retaining the overall design and branding qualities of the original site.

– CSS Grid, on the other hand, adjusts web content in a two-dimensional approach, affecting both rows and columns. For more visual-oriented websites with modular elements and a more complex layout, CSS Grid works to ensure that each section or area is still presented in a way that looks good and makes sense with the overall website.

While there are different approaches, the golden goose every web designer is chasing is a truly responsive form of layout that can adapt to any viewing platform seamlessly, delivering well-designed and attractive content no matter what.

Green Vine

While Flexbox and CSS Grid have made this sort of design possible in today’s mobile world, the development of responsive design web based grids is still an ongoing process. Designers and developers alike are exploring the possibilities, and new developments are in the process of integration and adoption by browsers and the coding community. Green Vine works to stay at the forefront of this field, ensuring our clients the most up-to-date web designed possible. In addition, we offer innovative web designs and a client + audience focused design process that works through the design to provide the solution that is right for you.

If you have questions about the design and integration process for grid based design for your web development project, give us a call at (720) 295 – VINE. (720) 295 – 8463