Skip to content

Instantly share code, notes, and snippets.

@nsluss

nsluss/index.html

Created September 5, 2015 02:05
Show Gist options
  • Save nsluss/a76aef91cf3408685a0a to your computer and use it in GitHub Desktop.
Save nsluss/a76aef91cf3408685a0a to your computer and use it in GitHub Desktop.
Download ZIP
Intro to grid systems
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>css grids</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
<style type="text/css">
.large-2 {
background-color: #95a5a6;
}
.large-4 {
background-color: #9b59b6;
}
.large-6 {
background-color: #2ecc71;
}
.large-8 {
background-color: #34495e;
}
.large-10 {
background-color: #f1c40f;
}
.large-12 {
background-color: #c0392b;
}
</style>
</head>
<body>
<div class="row">
<div class="large-4 columns"><p>column size 4</p></div>
<div class="large-8 columns"><p>column size 8</p></div>
</div>
<div class="row">
<div class="large-2 columns"><p>column size 2</p></div>
<div class="large-4 columns"><p>column size 4</p></div>
<div class="large-2 columns"><p>column size 2</p></div>
<div class="large-4 columns"><p>column size 4</p></div>
</div>
<div class="row">
<div class="large-12 columns"><p>column size 12</p></div>
</div>
<div class="row">
<div class="large-6 columns"><p>column size 6</p></div>
<div class="large-6 columns"><p>column size 6</p></div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="row">
<div class="large-12 columns"><p>you can also nest grids!</p></div>
</div>
<div class="row">
<div class="large-6 columns"><p>this is inside the nested grid!</p></div>
<div class="large-4 columns"><p>this is also nested!</p></div>
<div class="large-2 columns"><p>and so is this!</p></div>
</div>
</div>
<div class="large-6 columns"><p>this is outside the nested grid</p></div>
</div>
<div class="row">
<div class="large-12 columns"><p>what happens?</p></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment