From print to web – The story of grids

When two industries conflict, one thing superb goes to occur… or considered one of them will probably be destroyed. Web and print collide a while in the past when some folks began to choose Web as a supply of knowledge and information previous to printed newspapers and books. Some specialists claimed that it’s going to trigger the top of print as we all know it. They thought the web will overtake the throne and kill its competitor. As you’ll be able to see that didn’t occur. Not less than not till now. Each, web and print are nonetheless “residing” in shut coexistence. Even they’ll look in a different way, they’ve one thing in frequent. They use grids. It doesn’t matter in case you are in Web Design, Development, Graphic or Print, you’re approaching grids day-after-day.

More often than not, when writing on related topics, I wish to begin with a brief introduction to historical past. At present, as a result of nobody is aware of when precisely grid appeared or who got here up with them, on this article will probably be no dates (your fortunate).

The primary grid system which was created was known as Villard Diagram. It was in medieval instances when folks have been working simply with handwritten textual content. No movable sort was out there to date. It was after the WW2, when a number of the large Designers began to search for some choices to create layouts for print. They needed one thing to prepare the content material and its movement on the web page. This result in creating the typographic grid system as we all know it right this moment. In second half of twentieth century grid turned a part of European and American’s requirements. Sooner, grid was used as obligatory half in course of. The knowledge was very strict. At present, nonetheless, grid is taken into account solely as a helpful help or add-on in Design and never as one thing essential.

Since this weblog’s major focus is Web Design, let’s focus on that.

It’s not so way back when Web Designer began to make use of grid system on their web sites. They used them in related trend as print did – to create structure and set up content material on the web page – however now on the web. Drawback with this strategy was that in comparison with print, web is fluid and residing medium. There aren’t any static measurements for viewing content material. Folks use totally different gadgets with totally different display screen sizes for shopping the pages. You can not merely take some extent, pica or pixel-based structure in print and apply it in your web website. Nicely, you’ll be able to, however this fashion your content material will go well with just one particular decision and each one with totally different display screen is out of luck. Some folks would merely overlook this reality and proceed in no matter have been they doing. Happily, there are accountable Designers on the earth who takes their job significantly. They knew that static grids weren’t one of the best resolution for this fluid media. They wanted to customise them ultimately to help the number of current gadgets. This result in fluid grids.

Instance 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 distinction to static grids, fluid grids doesn’t use static items of measurement. As a substitute, they use fluid ones like ems, newer rems and percentages. This fashion the content material can adapt accordingly to any decision customer makes use of. With this capacity, Web Designers are lastly in a position to serve great-looking content material to all their prospects. This fashion, web site is viewable on cellphones, tablets and desktops too.

Instance of fluid grid:

.wrapper {
 show: 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 Format Module

The whole lot may simply find yourself with fluid grids. Not for regularly evolving web. Just lately the W3C introduced engaged on CSS Grid Format Module (from model three CSS is module primarily based). This CSS module defines utterly new two-dimensional grid-based structure system. On this grid structure mannequin, the kids of a grid container may be positioned into slots in a versatile or fastened predefined structure grid.

Instance from CSS-Tricks:


<div class="major">
 My superior content material right here
<footer class="footer">
 Some informations right here
<header class="header">
 My website title goes right here
<apart class="sidebar">
 Right here is my facet content material


physique {
 /* First, we outline physique as a grid ingredient */
 show: grid;
 /* Then, we outline the variety of columns we wish by setting their dimensions */
 /* Beware, gaps between columns will probably be precise columns too */
 /* 1. This implies there are 3 columns: 
 * the primary one is 200px large
 * the second will probably be a margin (1%) 
 * the third one will occupy the remaining area 
 grid-columns: 200px 1% 1fr; /* 1 */
 /* Now we outline the variety of rows and their dimensions */
 /* 2. this implies there are 5 rows: 
 * the primary one will probably be sized based on its content material
 * the second will probably be a margin
 * the third one will probably be sized based on its content material
 * the fourth one will probably be a margin as effectively
 * the final one will probably be sized based on its content material 
 grid-rows: auto 15px auto 15px auto; /* 2 */
 /* The physique ingredient is now a 3*5 grid. */
/* Each the header and the footer will probably be full width, so we've to make them occupy the three columns */
.footer {grid-column-span: 3;}
/* Let's outline by which row the header will probably be: the primary one */
.header {grid-row: 1;}
/* Identical for the footer: the final one so the fifth (keep in mind margins depend as cols/rows */
.footer {grid-row: 5;}
.sidebar {
 /* The sidebar will occupy the primary column which is 200px large */
 grid-column: 1;
 /* And the third row (there are the header and a margin earlier than) */
 grid-row: 3;
.major {
 /* The primary content material will probably be on the third column and the third row */
 grid-column: 3;
 grid-row: 3;


Grid system exist for a very long time and absolutely, because of CSS Grid Format Module, has one thing extra to say. You need to use it or not, prefer it or hate. The very fact is that it helps us to create handsome layouts of internet sites. With out grids, it could be a lot tougher to prepare content material whereas sustaining movement and concord. That is the principle aim we are attempting to attain. However who is aware of what future will convey …

Helpful hyperlinks:

In the event you favored this text, please subscribe so you do not miss any future publish.

If you would like to help me and this weblog, you’ll be able to change into a patron, or you should buy me a espresso 🙂

Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.

Checkout extra Articles on Sayed.CYou

#print #web #story #grids