Constructing the layout grid for any site is key critical to its success; traditionally, we may have done this first, but in the world of responsive design, content comes first! Throughout the course of this chapter, we've covered a few topics to help get you started, so let's take a moment to recap what we have learned.

We kicked off with an introduction to flexible grid layouts, with a mention that we may have to change our design process to facilitate creating responsive grids. We then moved onto to explore the different types of layout we can use, and how responsive layouts compare to these different types.

Next up, we began on the most important part of our layout—setting the available viewport; this controls how much is visible at any one point. We covered the need to set a viewport directive in our code, so that content is correctly displayed; we examined how not providing the directive can have a negative impact on the appearance of our content! In addition, we covered some of the additional properties and units of value we can use, along with balancing the viewport size against user experience.

We then moved onto exploring the benefits of flexible grid layouts, before taking a look at how they work in more detail; we then created a simple demo using a prebuilt grid system available from the Internet.

Moving on, we then took a look at using flexbox as a technology; we explored it through a simple demo, before dissecting some of the issues with using flexbox. We then saw how a replacement is in the works. We rounded out the chapter with a demo to explore how it can be activated today, and that it is simpler to develop solutions for it once it becomes a mainstream standard.

Now that we have our layout in place, it's time to move on. We need to start adding content! It's assumed that text would be added by default, but what about media? How do we make it responsive? We'll answer these questions, and more, in the next chapter, when we take a look at adding responsive media to our pages.