Flexible Layouts

Chapter 3

Now that chapter 2 has equipped you to create layouts in CSS, this chapter shows you how to make layouts that flex and reshape based on context.

  1. Flexible 3-column layout with no margin (figure 1)
  2. Flexible 3-column with some margin (figure 2)
  3. 3-column responsive (figure 3)
  4. 3-column responsive with broken borders (figure 4)
  5. 3-column responsive with borders (figure 5)
  6. 2-column responsive
  7. 10-column responsive using borders