Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.

What is a Grid-Based Design?

A grid-based design is one that works in and around the constraints of a row-and-column-based grid system to help keep your content nicely aligned.

1.Welcome
1 lesson, 00:50

Free Preview
1.1
Introduction
00:50

2.Introduction to Grid Systems
2 lessons, 08:38

Free Preview
2.1
What is a Grid-Based Design?
02:01

2.2
Popular Grid-Based Systems
06:37

3.The 960 Grid System
9 lessons, 58:28

3.1
Exploring the 960 Grid System
05:28

3.2
Coding With the 960 Grid System
09:51

3.3
Exploring Unsemantic
04:16

3.4
Using Unsemantic
11:11

3.5
Twitter Bootstrap
03:24

3.6
Coding Columns in Bootstrap
08:25

3.7
The Bootstrap Fluid Grid
01:48

3.8
Foundation
05:08

3.9
Coding Columns in Foundation
08:57

4.Why Create Your Own System?
6 lessons, 47:40

4.1
Why Create Your Own System?
04:07

4.2
HTML for a Four-Column Layout
09:11

4.3
Calculating Widths
05:55

4.4
Resetting Styles
06:45

4.5
CSS for a Four-Column Layout
15:01

4.6
Creating a Three-Column Layout
06:41

5.Conclusion
1 lesson, 01:09

5.1
Conclusion
01:09


Craig has been doodling on computers since the first time he opened Paintbrush in Windows 3.0 in 1990. Since then, he has constantly sought new and exciting ways to make beautiful things on computers.
+ Expand Bio- Collapse Bio