Created
September 5, 2015 02:05
-
-
Save nsluss/a76aef91cf3408685a0a to your computer and use it in GitHub Desktop.
Intro to grid systems
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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