Skip to content

Instantly share code, notes, and snippets.

@arvindang

arvindang/Calc() Grid System

Created December 18, 2014 20:41
Show Gist options
  • Save arvindang/4cb4220eff7b7af29294 to your computer and use it in GitHub Desktop.
Save arvindang/4cb4220eff7b7af29294 to your computer and use it in GitHub Desktop.
Download ZIP
Grid system using calc
Raw
Calc() Grid System
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script>
.grid-box {
float: left;
width: calc(25% - 20px);
margin: 10px;
}
.grid-box-2 {
float: left;
width: calc(50% - 20px);
margin: 10px;
}
</script>
<div class="grid-box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora a eligendi ratione ipsum illum dicta architecto. Odit tenetur velit incidunt, rerum quia numquam assumenda nostrum, praesentium quas, optio error aliquid!
</div>
<div class="grid-box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora a eligendi ratione ipsum illum dicta architecto. Odit tenetur velit incidunt, rerum quia numquam assumenda nostrum, praesentium quas, optio error aliquid!
</div>
<div class="grid-box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora a eligendi ratione ipsum illum dicta architecto. Odit tenetur velit incidunt, rerum quia numquam assumenda nostrum, praesentium quas, optio error aliquid!
</div>
<div class="grid-box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora a eligendi ratione ipsum illum dicta architecto. Odit tenetur velit incidunt, rerum quia numquam assumenda nostrum, praesentium quas, optio error aliquid!
</div>
<div class="grid-box-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora a eligendi ratione ipsum illum dicta architecto. Odit tenetur velit incidunt, rerum quia numquam assumenda nostrum, praesentium quas, optio error aliquid!
</div>
<div class="grid-box-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora a eligendi ratione ipsum illum dicta architecto. Odit tenetur velit incidunt, rerum quia numquam assumenda nostrum, praesentium quas, optio error aliquid!
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment