CSS Grid is revolutionary. Up to 2018, the exploration of web layout strategies has been along the lines of a word processor. You start at the top and create content vertically as elements stack like blocks, which is easy, and horizontally, by limiting the width of the elements so you can go from left to right. The activity of designing web pages as if one were designing in Microsoft Word has come to an end! CSS Grid is here! You create the grid and then populate it in any way and in any order you see fit, creating white space wherever you deem esthetically pleasing or communicatively correct.

Allow Massimo Vignelli to introduce grids.

Grids

For us Graphic Design is “organization of information.” There are other types of graphic design more concerned with illustration or of a narrative nature. Nothing could be more useful to reach our intention than the Grid. The grid represents the basic structure of our graphic design, it helps to organize the content, it provides consistency, it gives an orderly look and it projects a level of intellectual elegance that we like to express.

There are infinite kinds of grids but just one – the most appropriate – for any problem. Therefore, it becomes important to know which kind of grid is the most appropriate. The basic understanding is that the smaller the module of the grid the least helpful it could be. We could say that an empty page is a page with an infinitesimal small grid. Therefore, it is equivalent to not being there. Conversely, a page with a coarse grid is a very restricting grid offering too few alternatives. The secret is to find the proper kind of grid for the job at hand. Sometimes, in designing a grid we want to have the outside margins small enough to provide a certain tension between the edges of the page and the content. After that, we divide the page in a certain number of columns according to the content, three, two, four, five, six, etc. Columns provide only one kind of consistency but we also need to have a horizontal frame of reference to assure certain levels of continuity throughout the publication. Therefore, we will divide the page from top to bottom in a certain number of Modules, four, six, eight, or more, according to size and need. Once we have structured the page, we will begin to structure the information and place it in the grid in such a way that the clarity of the message will be enhanced by the placement of the text on the grid. There are infinite ways of doing this and that is why the grid is a useful tool, rather than a constricting device. However, one should learn to use it so as to retrieve the most advantageous results.

Vignelli has plenty to say about grids, margins, columns, and modules in his book The Vignelli Canon (pages 40 to 53) He provides a clear illustration of how to use a grid. Grid for the web is similar enough, except it is not just an organization principle but a layout tool. You will learn to use the CSS grid by using it.

Massimo Vignelli concludes his Canon with the power of white space.

WHITE SPACE

I often say that in typography the white space is more important than the black of the type. The white space on the printed page is the correspondent of space in architecture. In both situations space is what qualifies the context. Naturally, the organization of information needs a structure to hold together, but one should not underestimate the importance of white space to better define the hierarchy of every component. White space, non only separates the different parts of the message but helps to position the message in the context of the page. Tight margins establish a tension between text, images and the edges of the page. Wider margins deflate the tension and bring about a certain level of serenity to the page. Tight type setting transforms words into lines just as loose type settings transform words in to dots. Decreasing or increasing the letter spacing (kearning) confers very distinctive character and expression to the words. All this is space manipulation and it is this device that is used in layouts to achieve a desired expression. The relationship between the size of type and the space around it is one of the most delicate and precious elements of a composition. I must say that the masterful handling of white space on a printed page is perhaps the most peculiar attribute of American graphic design. Just like space is the protagonist in Frank Lloyd Wright’s architecture. Somehow, it relates to the epic grandeur of the American landscapes.

For many artists white space is the essential element of the composition. It is the fundamental qualifier and protagonist of the image. Almost all the great American graphic designers have used white space as the significant silence to better hear their message loud and clear.

Such is indeed the power of the white space.