Extending your grids

In the preceding examples, you used one grid with one break point. Below the break point, your rows simply stack. This seems to work in many cases, but sometimes, it will be useful to have a grid for small screens as well. Imagine that you build a photo gallery. On large screens, there will be four photos in a row. For smaller screens, the photos shouldn't stack but show up with two instead of four in a row.

Again, you can solve this situation using grid classes or mixins for a more semantic solution.

In both situations, you should also make your photos responsive. You can do this by adding styles for your images. Setting max-width to 100% and height to auto does the trick in most cases. The max-width variable prevents images from being displayed wider than their original size and ensures that they get 100 percent of their parent's width in other situations. On small screens, these images will get 100 percent width of the viewport.

To make your images responsive by default...