Skip to content

Instantly share code, notes, and snippets.

@eswak

eswak/automatic-grid.html

Created July 17, 2014 08:24
Show Gist options
  • Save eswak/7aa774406acb36ca8fb6 to your computer and use it in GitHub Desktop.
Save eswak/7aa774406acb36ca8fb6 to your computer and use it in GitHub Desktop.
Download ZIP
Automatic grid in CSS3
Raw
automatic-grid.html
<html>
<head>
<style>
.grid *:first-child:nth-last-child(1) {
width: 100%;
}
.grid *:first-child:nth-last-child(2),
.grid *:first-child:nth-last-child(2) ~ * {
width: 50%;
}
.grid *:first-child:nth-last-child(3),
.grid *:first-child:nth-last-child(3) ~ * {
width: 33.3333%;
}
.grid *:first-child:nth-last-child(4),
.grid *:first-child:nth-last-child(4) ~ * {
width: 25%;
}
.grid {
text-align:center;
padding:1em;
font-size:1.25em;
color:white;
font-family:sans-serif;
font-weight:bold;
}
.grid * {
padding:1em 0;
display: inline-block;
float:left;
}
</style>
</head>
<body>
<div class="grid">
<div style="background:darkorange">A</div>
</div>
<div class="grid">
<div style="background:darkorange">A</div>
<div style="background:orangered">B</div>
</div>
<div class="grid">
<div style="background:darkorange">A</div>
<div style="background:orangered">B</div>
<div style="background:red">C</div>
</div>
<div class="grid">
<div style="background:darkorange">A</div>
<div style="background:orangered">B</div>
<div style="background:red">C</div>
<div style="background:firebrick">D</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment