-
Notifications
You must be signed in to change notification settings - Fork 4
/
block-grid.html
104 lines (101 loc) · 4.88 KB
/
block-grid.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
---
layout: default
title: Block Grid
subnav:
- Default
- Gutters
---
<section id="grid">
<h2 class="m-b-1-xs">The Block Grid</h2>
<p class="m-b-1-xs">The block grid is used when you need a grid of an unknown number of items. The recommended way to build block grids is with <code>ul</code> elements, but the classes work just fine on any element, like a <code>div</code>. Use your best judgement to keep the markup as semantic as possible.</p>
<p class="m-b-1-xs">To build a block grid, start with a <code><ul class="block-grid block-n-xs"></code>, where n is a number from 1-6. These divisions can be changed across breakpoints by applying one or more of our <a href="responsive.html">grid suffix classes</a>. Then, inside that list, create your items with <code><li class="block-grid__item"></code>. If you want the same grid division across all breakpoints, use the default <code>.block-n-xs</code> class. <em>Resize your browser to see the block grid suffixes in effect.</em></p>
<p class="m-b-3-xs"><strong>Note:</strong> Do not put any style utility classes on the block grid containers, nest them inside the list items instead.</p>
<h3 id="Default" class="text-5-xs">No Gutters (Default)</h3>
<p class="m-b-3-xs">By default, the block grid comes with no gutters.</p>
<ul class="block-grid block-4-xs block-5-md block-6-xl">
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">1</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">2</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">3</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">4</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">5</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">6</div>
</li>
</ul>
<div class="guide-code m-b-4-xs">
<pre><code class="language-html"><ul class="block-grid block-4-xs block-5-md block-6-xl">
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">1</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">2</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">3</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">4</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">5</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">6</div>
</li>
</ul></code></pre>
</div>
<h3 id="Gutters" class="text-5-xs">Auto Gutters</h3>
<p class="m-b-3-xs">To add automatic gutters between items in the block grid, apply the class <code>.block-grid-gutters</code> alongside your <code>.block-grid</code> class.</p>
<ul class="block-grid block-2-xs block-3-lg block-6-xl block-grid-gutters">
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">1</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">2</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">3</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">4</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">5</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">6</div>
</li>
</ul>
<div class="guide-code">
<pre><code class="language-html"><ul class="block-grid block-2-xs block-3-lg block-6-xl block-grid-gutters">
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">1</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">2</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">3</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">4</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">5</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">6</div>
</li>
</ul></code></pre>
</div>
</section>