Responsive Web Design Patterns

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.

Try it

In the smallest view, each content div is stacked vertically. Once the screen width hits 600px, the primary content div remains at width: 100%, while the secondary div’s are shown as two columns below the primary div. Beyond 800px, the container div becomes fixed width and is centered on the screen.

Sites using this pattern include:

    .container {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
    }

    .c1, .c2, .c3, .c4, .c5 {
      width: 100%;
    }

    @media (min-width: 600px) {
      .c2, .c3, .c4, .c5 {
        width: 50%;
      }
    }

    @media (min-width: 800px) {
      .c1 {
        width: 60%;
      }
      .c2 {
        width: 40%;
      }
      .c3, .c4, .c5 {
        width: 33.33%;
      }
    }

    @media (min-width: 800px) {
      .container {
        width: 800px;
        margin-left: auto;
        margin-right: auto;
      }
    }
    
View full sample

Updated on 2014-04-30

Authors

Pete LePage

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.