O'Reilly logo

Less Web Development Essentials by Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required