Skip to content

Commit 434ca19

Browse files
adamwathanadamwathan
committed
Make grid documentation better than "absolutely awful"
1 parent f969201 commit 434ca19

File tree

3 files changed

+245
-245
lines changed

3 files changed

+245
-245
lines changed

‎docs/navigation.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@
4141
],
4242
'Floats' => 'floats',
4343
'Forms' => 'forms',
44-
'Grid' => 'grid',
4544
'Interactivity' => [
4645
'Cursor' => 'cursor',
4746
'Resize' => 'resize',
@@ -83,6 +82,7 @@
8382
'Buttons' => 'examples/buttons',
8483
'Cards' => 'examples/cards',
8584
'Forms' => 'examples/forms',
85+
'Grids' => 'examples/grids',
8686
'Navigation' => 'examples/navigation',
8787
],
8888
];

‎docs/source/docs/examples/grids.blade.md‎

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
---
2+
extends: _layouts.documentation
3+
title: "Grids"
4+
description: Examples of building grid layouts with Tailwind CSS.
5+
---
6+
7+
Tailwind doesn't include purpose-built grid classes out of the box, but grid layouts are simple to build using the existing [Flexbox](/docs/flexbox-display) and [width](/docs/width) utilities.
8+
9+
### Basic Grids
10+
11+
Use the existing [Flexbox](/docs/flexbox-display) and [percentage width](/docs/width) utilities to construct basic grids.
12+
13+
@component('_partials.code-sample', ['lang' => 'html'])
14+
<!-- Full width column -->
15+
<div class="flex mb-4">
16+
<div class="w-full bg-grey h-12"></div>
17+
</div>
18+
19+
<!-- Two columns -->
20+
<div class="flex mb-4">
21+
<div class="w-1/2 bg-grey-light h-12"></div>
22+
<div class="w-1/2 bg-grey h-12"></div>
23+
</div>
24+
25+
<!-- Three columns -->
26+
<div class="flex mb-4">
27+
<div class="w-1/3 bg-grey-light h-12"></div>
28+
<div class="w-1/3 bg-grey h-12"></div>
29+
<div class="w-1/3 bg-grey-light h-12"></div>
30+
</div>
31+
32+
<!-- Four columns -->
33+
<div class="flex mb-4">
34+
<div class="w-1/4 bg-grey h-12"></div>
35+
<div class="w-1/4 bg-grey-light h-12"></div>
36+
<div class="w-1/4 bg-grey h-12"></div>
37+
<div class="w-1/4 bg-grey-light h-12"></div>
38+
</div>
39+
40+
<!-- Five columns -->
41+
<div class="flex mb-4">
42+
<div class="w-1/5 bg-grey h-12"></div>
43+
<div class="w-1/5 bg-grey-light h-12"></div>
44+
<div class="w-1/5 bg-grey h-12"></div>
45+
<div class="w-1/5 bg-grey-light h-12"></div>
46+
<div class="w-1/5 bg-grey h-12"></div>
47+
</div>
48+
49+
<!-- Six columns -->
50+
<div class="flex">
51+
<div class="w-1/6 bg-grey-light h-12"></div>
52+
<div class="w-1/6 bg-grey h-12"></div>
53+
<div class="w-1/6 bg-grey-light h-12"></div>
54+
<div class="w-1/6 bg-grey h-12"></div>
55+
<div class="w-1/6 bg-grey-light h-12"></div>
56+
<div class="w-1/6 bg-grey h-12"></div>
57+
</div>
58+
@endcomponent
59+
60+
### Responsive Grids
61+
62+
Use the responsive variants of the width utilities to build responsive grid layouts.
63+
64+
@component('_partials.responsive-code-sample')
65+
@slot('none')
66+
<div class="flex flex-wrap">
67+
<div class="h-12 w-full mb-4 bg-grey"></div>
68+
<div class="h-12 w-full mb-4 bg-grey-light"></div>
69+
<div class="h-12 w-full mb-4 bg-grey"></div>
70+
<div class="h-12 w-full mb-4 bg-grey-light"></div>
71+
<div class="h-12 w-full mb-4 bg-grey"></div>
72+
<div class="h-12 w-full mb-4 bg-grey-light"></div>
73+
</div>
74+
@endslot
75+
@slot('sm')
76+
<div class="flex flex-wrap">
77+
<div class="h-12 w-1/2 mb-4 bg-grey"></div>
78+
<div class="h-12 w-1/2 mb-4 bg-grey-light"></div>
79+
<div class="h-12 w-1/2 mb-4 bg-grey"></div>
80+
<div class="h-12 w-1/2 mb-4 bg-grey-light"></div>
81+
<div class="h-12 w-1/2 mb-4 bg-grey"></div>
82+
<div class="h-12 w-1/2 mb-4 bg-grey-light"></div>
83+
</div>
84+
@endslot
85+
@slot('md')
86+
<div class="flex flex-wrap">
87+
<div class="h-12 w-1/3 mb-4 bg-grey"></div>
88+
<div class="h-12 w-1/3 mb-4 bg-grey-light"></div>
89+
<div class="h-12 w-1/3 mb-4 bg-grey"></div>
90+
<div class="h-12 w-1/3 mb-4 bg-grey-light"></div>
91+
<div class="h-12 w-1/3 mb-4 bg-grey"></div>
92+
<div class="h-12 w-1/3 mb-4 bg-grey-light"></div>
93+
</div>
94+
@endslot
95+
@slot('lg')
96+
<div class="flex flex-wrap">
97+
<div class="h-12 w-1/4 mb-4 bg-grey"></div>
98+
<div class="h-12 w-1/4 mb-4 bg-grey-light"></div>
99+
<div class="h-12 w-1/4 mb-4 bg-grey"></div>
100+
<div class="h-12 w-1/4 mb-4 bg-grey-light"></div>
101+
<div class="h-12 w-1/2 mb-4 bg-grey"></div>
102+
<div class="h-12 w-1/2 mb-4 bg-grey-light"></div>
103+
</div>
104+
@endslot
105+
@slot('xl')
106+
<div class="flex flex-wrap">
107+
<div class="h-12 w-1/6 mb-4 bg-grey"></div>
108+
<div class="h-12 w-1/6 mb-4 bg-grey-light"></div>
109+
<div class="h-12 w-1/6 mb-4 bg-grey"></div>
110+
<div class="h-12 w-1/6 mb-4 bg-grey-light"></div>
111+
<div class="h-12 w-1/6 mb-4 bg-grey"></div>
112+
<div class="h-12 w-1/6 mb-4 bg-grey-light"></div>
113+
</div>
114+
@endslot
115+
@slot('code')
116+
<div class="flex flex-wrap">
117+
<div class="none:w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-grey"></div>
118+
<div class="none:w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-grey-light"></div>
119+
<div class="none:w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-grey"></div>
120+
<div class="none:w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-grey-light"></div>
121+
<div class="none:w-full sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/6 mb-4 bg-grey"></div>
122+
<div class="none:w-full sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/6 mb-4 bg-grey-light"></div>
123+
</div>
124+
@endslot
125+
@endcomponent
126+
127+
### Mixed Column Sizes
128+
129+
Mix different percentage width utilities to build mixed size grids.
130+
131+
@component('_partials.code-sample', ['lang' => 'html'])
132+
<!-- Narrower side column -->
133+
<div class="flex mb-4">
134+
<div class="w-3/4 bg-grey h-12"></div>
135+
<div class="w-1/4 bg-grey-light h-12"></div>
136+
</div>
137+
138+
<!-- Wide center column -->
139+
<div class="flex">
140+
<div class="w-1/5 bg-grey h-12"></div>
141+
<div class="w-3/5 bg-grey-light h-12"></div>
142+
<div class="w-1/5 bg-grey h-12"></div>
143+
</div>
144+
@endcomponent
145+
146+
### Wrapping Columns
147+
148+
Add `flex-wrap` to your column container to allow columns to wrap when they run out of room.
149+
150+
@component('_partials.code-sample', ['lang' => 'html'])
151+
<div class="flex flex-wrap -mb-4">
152+
<div class="w-1/3 mb-4 bg-grey-light h-12"></div>
153+
<div class="w-1/3 mb-4 bg-grey h-12"></div>
154+
<div class="w-1/3 mb-4 bg-grey-light h-12"></div>
155+
<div class="w-1/3 mb-4 bg-grey h-12"></div>
156+
<div class="w-1/3 mb-4 bg-grey-light h-12"></div>
157+
</div>
158+
@endcomponent
159+
160+
### Column Spacing
161+
162+
Add a negative horizontal margin like `-mx-2` to your column container and an equal horizontal padding like `px-2` to each column to add gutters.
163+
164+
@component('_partials.code-sample', ['lang' => 'html'])
165+
<div class="flex -mx-2">
166+
<div class="w-1/3 px-2">
167+
<div class="bg-grey-light h-12"></div>
168+
</div>
169+
<div class="w-1/3 px-2">
170+
<div class="bg-grey h-12"></div>
171+
</div>
172+
<div class="w-1/3 px-2">
173+
<div class="bg-grey-light h-12"></div>
174+
</div>
175+
</div>
176+
@endcomponent
177+
178+
### Automatic Column Widths
179+
180+
Use `flex-1` instead of an explicit width on your columns to have them size automatically to fill the row.
181+
182+
@component('_partials.code-sample', ['lang' => 'html'])
183+
<!-- Full width column -->
184+
<div class="flex mb-4">
185+
<div class="flex-1 bg-grey h-12"></div>
186+
</div>
187+
188+
<!-- Five columns -->
189+
<div class="flex mb-4">
190+
<div class="flex-1 bg-grey-light h-12"></div>
191+
<div class="flex-1 bg-grey h-12"></div>
192+
<div class="flex-1 bg-grey-light h-12"></div>
193+
<div class="flex-1 bg-grey h-12"></div>
194+
<div class="flex-1 bg-grey-light h-12"></div>
195+
</div>
196+
197+
<!-- Seven columns -->
198+
<div class="flex mb-4">
199+
<div class="flex-1 bg-grey-light h-12"></div>
200+
<div class="flex-1 bg-grey h-12"></div>
201+
<div class="flex-1 bg-grey-light h-12"></div>
202+
<div class="flex-1 bg-grey h-12"></div>
203+
<div class="flex-1 bg-grey-light h-12"></div>
204+
<div class="flex-1 bg-grey h-12"></div>
205+
<div class="flex-1 bg-grey-light h-12"></div>
206+
</div>
207+
208+
<!-- Eleven columns -->
209+
<div class="flex mb-4">
210+
<div class="flex-1 bg-grey-light h-12"></div>
211+
<div class="flex-1 bg-grey h-12"></div>
212+
<div class="flex-1 bg-grey-light h-12"></div>
213+
<div class="flex-1 bg-grey h-12"></div>
214+
<div class="flex-1 bg-grey-light h-12"></div>
215+
<div class="flex-1 bg-grey h-12"></div>
216+
<div class="flex-1 bg-grey-light h-12"></div>
217+
<div class="flex-1 bg-grey h-12"></div>
218+
<div class="flex-1 bg-grey-light h-12"></div>
219+
<div class="flex-1 bg-grey h-12"></div>
220+
<div class="flex-1 bg-grey-light h-12"></div>
221+
</div>
222+
@endcomponent
223+
224+
### Column Order
225+
226+
Use `flex-reverse` to reverse column order. Useful for two-column responsive layouts where the column on right should appear first on smaller screens.
227+
228+
@component('_partials.code-sample', ['lang' => 'html'])
229+
<div class="flex md:flex-reverse flex-wrap">
230+
<div class="w-full md:w-3/4 bg-grey h-12"></div>
231+
<div class="w-full md:w-1/4 bg-grey-light h-12"></div>
232+
</div>
233+
@endcomponent
234+
235+
### Simple Offsets
236+
237+
Use auto margin utilities like `ml-auto` and `mr-auto` to offset columns in a row.
238+
239+
@component('_partials.code-sample', ['lang' => 'html'])
240+
<div class="flex flex-wrap">
241+
<div class="w-1/3 ml-auto bg-grey h-12"></div>
242+
<div class="w-1/3 mr-auto bg-grey-light h-12"></div>
243+
</div>
244+
@endcomponent

0 commit comments

Comments
 (0)