Grid Layout
Designing with a Grid
Every good web design begins with a sketch. As you may have noticed, everything in CSS has to be mathematically laid out. You need to have dimensions for your margins, padding, etc. This requires that these sketches are built with a "grid" in mind to help with alignments.
Because every aspect of a site’s “look” is defined by HTML/CSS – it is crucial to have a detailed sketch going in.
Pay particular attention to the location of navigation bars, titles, headers, content, images, footers etc.
When imagining alignments, in particular, be mindful of the grid.
Rows and Columns
The grid is made up of rows and columns. Columns run from left to right accross the width of the page. (The green bars in the above picture). Rows run horizontally from top to bottom.
It's important to break down websites into rows and columns.
How many rows and columns do you see?
Rows:
Columns:
In this example, the footer is included as a row, but not the header. This is a rather arbitrary choice, but partially based on the fact that navbars aren't a part of the bootstrap grid system. We will get into that more in a moment.
How many rows and columns in this example?
Rows:
***You may notice that we lumped together the images and text into a single row. It makes sense to do this when the images and text are essentially "tied" to one another. {% endtab %}
Columns:
{% hint style="info" %} Notice that each wireframe represents a different kind of website (one is a blog, one is a corporate site, etc. {% endhint %}
Sub-rows and Sub-Columns
How many rows and columns are in this example?
Larger Rows:
Sub-Rows:
Larger Columns:
Sub-columns:
The way to access sub-elements is to put rows inside columns that are inside of larger rows.
Don't worry, this one was tricky! Just remember the big takeaway: webpage layouts can always be broken down into rows and columns.
Here are a few wireframing resources:
There are many tools for wireframes. Balsamiq and Framebox are among the best.