Skip to content

Instantly share code, notes, and snippets.

@davidvandenbor

davidvandenbor/responsive_grid_fluid.html

Last active August 29, 2015 14:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save davidvandenbor/96537d3c5cbbb131d971 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save davidvandenbor/96537d3c5cbbb131d971 to your computer and use it in GitHub Desktop.
Download ZIP
simple responsive grid with CSS flex
Raw
responsive_grid_fluid.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Web Design Pattern: Mostly Fluid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" href="/web/fundamentals/resources/samples/css/normalize.css">
<link rel="stylesheet" href="/web/fundamentals/resources/samples/css/main.css">
<link rel="stylesheet" href="layouts-common.css">
<style>
/*common styles*/
.container {
margin: 0;
padding: 0;
width: 100%;
}
.container div {
box-sizing: border-box;
min-height: 150px;
min-width: 150px;
}
.c1,
.c2,
.c3,
.c4,
.c5 {
padding: 5%;
}
.c1 {
color: white;
background-color: #003476;
}
.c2 {
color: white;
background-color: #0062d2;
}
.c3 {
color: #333;
background-color: #b4d2f7;
}
.c4 {
color: #333;
background-color: #d5dfef;
}
.c5 {
color: #333;
background-color: #dfe1e5;
}
/*and now the fluids*/
.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) {
.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
.c1 {
width: 60%;
background: red;
}
.c2 {
width: 40%;
background: green;
}
.c3,
.c4,
.c5 {
width: 33.33%;
background: purple;
color: white;
}
}
</style>
</head>
<body>
<div class="container" role="main">
<div class="c1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque veniam ut quia a autem obcaecati dolore quae quaerat nihil ducimus dolor accusantium nemo rem, reprehenderit officia optio esse, illo corporis!
</div>
<div class="c2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores ut, blanditiis suscipit assumenda perspiciatis quasi aliquam id ullam laborum, quidem eos, nam iure magni a dignissimos expedita, eaque veritatis pariatur!
</div>
<div class="c3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, eveniet eligendi possimus vel? Velit quaerat, iusto dolore sit quos minima minus facere, ut quo temporibus? Repellat, ex vel. Sint, tempore?
</div>
<div class="c4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente in repellat modi non eius nihil delectus assumenda, ea ex, nisi voluptate rem, doloremque. Adipisci laboriosam officiis quas nostrum, aspernatur earum.
</div>
<div class="c5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo repellat, velit placeat molestias iure molestiae natus, quasi nemo eveniet doloribus, sapiente voluptates reiciendis iusto quam dolores excepturi. Commodi, dolorum expedita.
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment