Then grid-template-areas is used to visually create mobile layout. In the example below, a single grid is used, which explicitly set the columns and rows for the grid. While in the past the layout shifter required a significant amount of work to create, which likely kept it less popular than some of the other designs on the this list, thanks to CSS Grid and grid areas it can be remarkably simple. There are many different possibilities for creating a responsive web design using this technique, the following illustration and the example is just one of those possibilities. While the layout shifter does require the most amount of work, it also has the most room for innovation and creativity. With this layout, various screens can see vastly different layouts. The layout shifter pattern is likely the most complex and therefore requires the most adapting.

See the Pen The layout was designed large screen first, and used media queries to move down. Only a minimum amount of media queries are required to adjust the order and make sure the element fill the appropriate amount of space.

With flexbox and flex-wrap, creating the column drop layout is quite simple. This means content will be less fluid and instead adapting to the screen sizes will be made responsive by stacking the columns. The column drop layout is when a layout will have multi-columns on a larger screen, but begins dropping columns as the screen size gets smaller.

See the Pen type of the layout can be easily accomplished using CSS Grid and explicitly setting the row heights for the header and footer. This layout structure requires few if any media queries and little effort to optimize it across all screen sizes. These layouts consist of a single column that fluidly grow and shrink with the screen size. Tiny tweaks is the simplest of all the responsive layout patterns and relies heavily on the natural responsiveness of the HTML.

Wroblewski broke these layout patterns into 5 categories: tiny tweaks, mostly fluid, column drop, layout shifter, off canvas. In 2012, two years after Marcotte told the world about Responsive Web Design, Luke Wroblewski, seeing patterns in how developers were designing their responsive layouts, wrote the article Multi-Device Layout Patterns open in new window. Over a decade later, the world and industry has moved forward, and the idea of responsive web design is no longer an idea, it is a requirement. In 2010, Ethan Marcotte, provided the industry with a wake-up and a path with his now famous article, Responsive Web Design open in new window. With the introduction of the true mobile browser, no longer were web sites being accessed exclusively by desktops and laptops.

Design responsive layout