flexbox-grid-mixins
Version:
Sass Mixins to generate Flexbox grid
121 lines (106 loc) • 1.78 kB
HTML
<html>
<head>
<title>Flexbox Grid Mixins - Flexbox Grid Mixins Example</title>
<link rel="stylesheet" href="../css-dart-sass/default.css">
<link rel="stylesheet" href="../css-dart-sass/auto-margin.css">
</head>
<body>
<div class="header">
<h1 class="header-title">Flexbox Grid Mixins</h1>
<p class="header-description">Sass Mixins to generate Flexbox grid</p>
</div>
<div class="container">
<h2>Auto margin</h2>
<div class="grid--auto-margin">
<div class="grid__col left">
1
</div>
<div class="grid__col">
2
</div>
<div class="grid__col">
3
</div>
<div class="grid__col">
4
</div>
<div class="grid__col">
5
</div>
</div>
<div class="grid--auto-margin">
<div class="grid__col">
1
</div>
<div class="grid__col">
2
</div>
<div class="grid__col">
3
</div>
<div class="grid__col">
4
</div>
<div class="grid__col right">
5
</div>
</div>
<div class="grid--auto-margin">
<div class="grid__col left">
1
</div>
<div class="grid__col">
2
</div>
<div class="grid__col">
3
</div>
<div class="grid__col">
4
</div>
<div class="grid__col right">
5
</div>
</div>
<div class="grid--auto-margin">
<div class="grid__col right">
1
</div>
<div class="grid__col right">
2
</div>
<div class="grid__col">
3
</div>
<div class="grid__col left">
4
</div>
<div class="grid__col left">
5
</div>
</div>
<h2>Pagination</h2>
<div class="grid--pagination">
<div class="grid__col left">
left<br>
</div>
<div class="grid__col right">
right<br>
</div>
</div>
<h3>Only left</h3>
<div class="grid--pagination">
<div class="grid__col left">
left<br>
</div>
</div>
<h3>Only right</h3>
<div class="grid--pagination">
<div class="grid__col right">
right<br>
</div>
</div>
</div>
</body>
</html>