Table of Contents
When two industries clash, something amazing is going to happen… or one of them will be destroyed. Web and print collide some time ago when some people started to prefer Internet as a source of information and news prior to printed newspapers and books. Some experts claimed that it will cause the end of print as we know it. They thought the web will overtake the throne and kill its competitor. As you can see that didn’t happen. At least not until now. Both, web and print are still “living” in close coexistence. Even they can look differently, they have something in common. They use grids. It doesn’t matter if you are in Web Design, Development, Graphic or Print, you are approaching grids every day.
Most of the time, when writing on similar subjects, I want to start with a short introduction to history. Today, because no one knows when exactly grid appeared or who came up with them, in this article will be no dates (your lucky).
The first grid system which was created was called Villard Diagram. It was in medieval times when people were working just with handwritten text. No movable type was available so far. It was after the WW2, when some of the big Designers started to look for some options to create layouts for print. They wanted something to organize the content and its flow on the page. This lead to creating the typographic grid system as we know it today. In second half of 20th century grid became part of European and American’s standards. Sooner, grid was used as necessary part in process. The wisdom was very strict. Today, however, grid is considered only as a useful support or add-on in Design and not as something crucial.
Since this blog’s main focus is Web Design, let’s discuss that.
It is not so long ago when Web Designer started to use grid system on their websites. They used them in similar fashion as print did – to create layout and organize content on the page – but now on the internet. Problem with this approach was that compared to print, web is fluid and living medium. There are no static measurements for viewing content. People use different devices with different screen sizes for browsing the pages. You cannot simply take a point, pica or pixel-based layout in print and apply it on your web site. Well, you can, but this way your content will suit only one specific resolution and every one with different screen is out of luck. Some people would simply overlook this fact and continue in whatever were they doing. Fortunately, there are responsible Designers in the world who takes their job seriously. They knew that static grids were not the best solution for this fluid media. They needed to customize them in some way to support the variety of existing devices. This lead to fluid grids.
Example of static grid:
.container_12 {
margin-left: auto;
margin-right: auto;
width: 960px;
}
.container_12 .grid_1 {width: 60px;}
.container_12 .grid_2 {width: 140px;}
.container_12 .grid_3 {width: 220px;}
.container_12 .grid_4 {width: 300px;}
.container_12 .grid_5 {width: 380px;}
.container_12 .grid_6 {width: 460px;}
.container_12 .grid_7 {width: 540px;}
.container_12 .grid_8 {width: 620px;}
.container_12 .grid_9 {width: 700px;}
.container_12 .grid_10 {width: 780px;}
.container_12 .grid_11 {width: 860px;}
.container_12 .grid_12 {width: 940px;}
Fluid Grids
In contrast to static grids, fluid grids doesn’t use static units of measurement. Instead, they use fluid ones like ems, newer rems and percentages. This way the content can adapt accordingly to any resolution visitor uses. With this ability, Web Designers are finally able to serve great-looking content to all their customers. This way, website is viewable on mobile phones, tablets and desktops too.
Example of fluid grid:
.wrapper {
display: block;
margin: 0 auto;
max-width: 960px;
}
.grid_1 {width: 4.166667%; /* 40px */}
.grid_2 {width: 10.41667%; /* 100px */}
.grid_3 {width: 16.66667%; /* 160px */}
.grid_4 {width: 22.91667%; /* 220px */}
.grid_5 {width: 29.16667%; /* 280px */}
.grid_6 {width: 35.41667%; /* 340px */}
.grid_7 {width: 41.66667%; /* 400px */}
.grid_8 {width: 47.91667%; /* 460px */}
.grid_9 {width: 54.16667%; /* 520px */}
.grid_10 {width: 60.41667%; /* 580px */}
.grid_11 {width: 66.66667%; /* 640px */}
.grid_12 {width: 72.91667%; /* 700px */}
.grid_13 {width: 79.16667%; /* 760px */}
.grid_14 {width: 85.41667%; /* 820px */}
.grid_15 {width: 91.66667%; /* 880px */}
.grid_16 {width: 97.91667%; /* 940px */}
CSS Grid Layout Module
Everything could easily end up with fluid grids. Not for continually evolving web. Recently the W3C announced working on CSS Grid Layout Module (from version three CSS is module based). This CSS module defines completely new two-dimensional grid-based layout system. In this grid layout model, the children of a grid container can be positioned into slots in a flexible or fixed predefined layout grid.
Example from CSS-Tricks:
HTML:
<div class="main"> My awesome content here </div> <footer class="footer"> Some informations here </footer> <header class="header"> My site title goes here </header> <aside class="sidebar"> Here is my side content </aside>
CSS:
body {
/* First, we define body as a grid element */
display: grid;
/* Then, we define the number of columns we want by setting their dimensions */
/* Beware, gaps between columns will be actual columns too */
/* 1. This means there are 3 columns:
* the first one is 200px wide
* the second one will be a margin (1%)
* the third one will occupy the remaining space
*/
grid-columns: 200px 1% 1fr; /* 1 */
/* Now we define the number of rows and their dimensions */
/* 2. this means there are 5 rows:
* the first one will be sized according to its content
* the second one will be a margin
* the third one will be sized according to its content
* the fourth one will be a margin as well
* the last one will be sized according to its content
*/
grid-rows: auto 15px auto 15px auto; /* 2 */
/* The body element is now a 3*5 grid. */
}
/* Both the header and the footer will be full width, so we have to make them occupy the 3 columns */
.header,
.footer {grid-column-span: 3;}
/* Let's define in which row the header will be: the first one */
.header {grid-row: 1;}
/* Same for the footer: the last one so the fifth (remember margins count as cols/rows */
.footer {grid-row: 5;}
.sidebar {
/* The sidebar will occupy the first column which is 200px wide */
grid-column: 1;
/* And the 3rd row (there are the header and a margin before) */
grid-row: 3;
}
.main {
/* The main content will be on the 3rd column and the 3rd row */
grid-column: 3;
grid-row: 3;
}
Summary
Grid system exist for a long time and surely, thanks to CSS Grid Layout Module, has something more to say. You can use it or not, like it or hate. The fact is that it helps us to create good-looking layouts of websites. Without grids, it would be much harder to organize content while maintaining flow and harmony. This is the main goal we are trying to achieve. But who knows what future will bring …
Useful links:
http://alistapart.com/article/fluidgrids/ http://www.w3.org/TR/css3-grid-layout/
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
