wnpc
Version:
This README outlines the details of collaborating on this Ember application.
97 lines (86 loc) • 2.1 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>grid.css</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<link rel="stylesheet" href="grid.css">
<link rel="stylesheet" href="example.css">
</head>
<body>
<div class="row">
<div class="col-6">
<div class="box"></div>
</div>
<div class="col-6">
<div class="box"></div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="box"></div>
</div>
<div class="col-md-6 col-lg-3">
<div class="box"></div>
</div>
<div class="col-md-6 col-lg-3">
<div class="box"></div>
</div>
<div class="col-md-6 col-lg-3">
<div class="box"></div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="box"></div>
<h3>Nested columns</h3>
<div class="row">
<div class="col-lg-3">
<div class="box"></div>
</div>
<div class="col-lg-3">
<div class="box"></div>
</div>
<div class="col-lg-3">
<div class="box"></div>
</div>
<div class="col-lg-3">
<div class="box"></div>
</div>
</div>
</div>
</div>
<!-- Offset -->
<div class="row">
<div class="col-6 col-offset-3 col-md-offset-2">
<h3>Offset columns</h3>
<div class="box"></div>
</div>
</div>
<!-- Inconsistent height -->
<div class="row">
<div class="col-3">
<div class="box"></div>
</div>
<div class="col-3">
<div class="box" style="height: 100px;"></div>
</div>
<div class="col-3">
<div class="box"></div>
</div>
<div class="col-3">
<div class="box" style="height: 75px;"></div>
</div>
<div class="col-3 col-lg-clear">
<div class="box"></div>
</div>
<div class="col-3">
<div class="box"></div>
</div>
<div class="col-3">
<div class="box"></div>
</div>
</div>
</body>
</html>