Grid Layout

In terms of graphic design on the web, one of the hottest topics is creating a grid layout or structure for your website. When you have a large website, it is often a great idea to structure content in a way that effectively shows users the extensiveness of the content without overwhelming them. Grid design does precisely that by giving your website sections to display different types or subjects of content. Let’s not forget that many design principles are derived from the experts that were designing before we had the internet. These experts generally worked with books, newspapers, and journals, which the vast majority implemented grid design.

So, we can all take a look at some of these old resources that have been updated for the modern web. CNN, Life Hacker, and Indiana University Library all show solid examples using grid layout to organize information. Let’s take an analytical look at horizontally divided graphic design.

Grid Design (Horizontal Division)

All of the previous website examples use grid design by dividing the horizontal width to incorporate the columns. You might notice how one grid can extend longer than the other grids, but it still doesn’t look unappealing as the user rarely reaches the bottom of a page. On the right is an example of horizontally dividing grids shown with the grids that are typically invisible.

Grid Design (Vertical Division)

While you can hopefully see how the content is divided up into section based on widths, grid design can also be a vertical division. It is almost impossible to get content that contains text to be the same height, which makes a vertical grid layout complicated. However, the working theory can be achieved by dividing after the lowest content of the “grid row”. One of the leading resources in Grid layout design shows how to use both vertical and horizontal division using grids.

The best way to learn all of this grid design/layout stuff is to try it yourself. I know that I have given you a few examples and explained it in a rather abstract manner. This is because a grid system depends heavily on what you want from it. Try creating an HTML document and a CSS style sheet. Create a series of div elements that have specific names to divide the page. Look at a few of the example websites’ source code to see how they did it.