Join Joseph Lowery for an in-depth discussion in this video Structuring fluid grids, part of Responsive Design with Dreamweaver CS6.
A fluid grid by definition is flexible and response to the width of the screen as much as possible. I'll explain that little disclaimer as much as possible a bit later in the course, but first, let's look at the science behind fluid grids and where it all began. I have to give credit where credit is due, and once again, it goes to Ethan Marcotte, who really codified the idea of fluid grids with his article that appeared in A List Apart. Fluid grids actually have their genesis in another basic proportional element, the em.
The em, as I'm sure you know, is used to express font size in relation to the browser standard font size. The standard size of basic text in most browsers is 16 pixels, this figure becomes the context that all other text sizes in ems is calculated against. The formula used for this calculation is target divided by context, equals result. So, for example, if you want to incorporate an h1 tag that is 24 pixels, you can use this formula to figure the em value, 24 divided by 16, equals 1.5, therefore, 24 pixels equals 1.5 ems.
The same basic formula target divided by context equals result, can be used for calculating areas of the page so that they are proportional to their container with one small change, because we're dealing with percentages rather than ems, you'll need to multiply the result by 100 to get the percentage. Let's look at an example. Let's say you have a design with a width of 988 pixels, that's the context in our formula. If you wanted to have the header div, that's the target, take up the full width of the screen, the width of the header div would be 100%, right? And that matches our formula, because 988 divided by 988, equals 1, and one times 100 equals 100%.
Now let's say we have a main content div that is 700 pixels wide, according to our formula, 700 divided by 988, and then multiplied by 100 equals 70.8502024%. Don't be afraid of the long decimal values, browsers eat that up for lunch. We could easily add a sidebar and figure out its percentage width, you get how this works, right? So, there's one last point, and it's an important one. Although the context in our examples so far has been the full page width, it isn't always so, but the context, in fact, depends on what you're choosing as your target.
For example, how do we figure the width of the margins between columns in the fluid grid? In a comp like this one, it may be 20 pixels, and since we usually express that space between two columns as a margin left value, the context is the width of the columns, which in this design is 124 pixels. So, applying our formula makes the margin 11.4942529%. Got it? When we're all done, our fluid grid layout goes from this to this.
Fluid grids are in essence a numbers game based on percentages, and while Dreamweaver's new fluid grid layout feature discussed in Chapters 2 and 3 handles all the math for you, I think it's important to know where the math comes from, and I hope you'll find it useful as well.
- Exploring the default Fluid Grid Layout
- Adding building block div tags
- Inserting content into a fluid grid
- Modifying the number of grid columns
- Adjusting column widths and margins
- Building media queries from scratch
- Handling orientation changes
- Setting up server-side solutions