Responsive web design patterns are quickly evolving, but there are a handful of established patterns that work well across the desktop and mobile devices.
Most layouts used by responsive web pages can be categorized into one of five patterns: mostly fluid, column drop, layout shifter, tiny tweaks, and off canvas. In some cases, a page may use a combination of patterns, for example column drop and off canvas. These patterns, originally identified by Luke Wroblewski, provide a solid starting point for any responsive page.
The patterns
For simplicity and ease of understanding, each the samples below were created with real markup using flexbox, typically with three content div‘s contained within a primary container div. Each sample was written starting with the smallest view first, and breakpoints were added when necessary. The flexbox layout mode is well supported for modern browsers, though may still require vendor prefixing for optimal support.
Mostly Fluid
The mostly fluid pattern consists primarily of a fluid grid. On large or medium screens, it usually remains the same size, simply adjusting the margins on wider screens.
On smaller screens, the fluid grid causes the main content to reflow, while columns are stacked vertically. One major advantage of this pattern is that it usually only requires one breakpoint between small screens and large screens.