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.
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.
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:
Try it
.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
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 .