UNPKG

13.9 kBHTMLView Raw
1<!DOCTYPE html>
2<html>
3<head>
4 <!-- Standard Meta -->
5 <meta charset="utf-8" />
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
8
9 <!-- Site Properties -->
10 <title>Grid Example - Semantic</title>
11
12 <link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
13 <link rel="stylesheet" type="text/css" href="../dist/components/site.css">
14
15 <link rel="stylesheet" type="text/css" href="../dist/components/container.css">
16 <link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
17 <link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
18 <link rel="stylesheet" type="text/css" href="../dist/components/header.css">
19</head>
20<body>
21
22 <div class="ui text container">
23 <h1 class="ui dividing header">Using Grids</h1>
24
25 <h3 class="first">Container</h3>
26 <p>A container is a fixed width element that wraps your site's content. It remains a constant size and uses <b>margin</b> to center. Containers are the simplest way to center page content inside a grid.</code>
27 </p>
28 </div>
29
30 <div class="ui container">
31 <div class="ui grid">
32 <div class="column"></div>
33 <div class="column"></div>
34 <div class="column"></div>
35 <div class="column"></div>
36 <div class="column"></div>
37 <div class="column"></div>
38 <div class="column"></div>
39 <div class="column"></div>
40 <div class="column"></div>
41 <div class="column"></div>
42 <div class="column"></div>
43 <div class="column"></div>
44 <div class="column"></div>
45 <div class="column"></div>
46 <div class="column"></div>
47 <div class="column"></div>
48 </div>
49 </div>
50
51 <div class="ui text container">
52 <h3 class="first">Text Container</h3>
53 <p>Sometimes you just need to put a single column of centered text on a page. A <code>text container</code> is a special type of container optimized for a single flowing column of text, like this instructions on this page.
54 </p>
55 <p>Text containers <b>do not need to use grids</b> and help simplify basic page layouts.</p>
56 </div>
57
58 <div class="ui text container">
59 <div class="ui one column grid">
60 <div class="column"></div>
61 </div>
62 </div>
63
64
65 <div class="ui text container">
66
67 <h1 class="ui dividing header">Grid Content</h1>
68
69 <h3 class="first">Column Flow</h3>
70 <p>A grid does not necessarily need to specify rows. If you include <code>columns</code> as direct child of <code>ui grid</code> content will automatically flow to the next row when all the grid columns are taken in the current row</b>.</p>
71
72 <div class="ui grid">
73 <div class="four wide column"></div>
74 <div class="four wide column"></div>
75 <div class="four wide column"></div>
76 <div class="four wide column"></div>
77 <div class="four wide column"></div>
78 <div class="four wide column"></div>
79 <div class="four wide column"></div>
80 <div class="four wide column"></div>
81 </div>
82
83 <h3>Clearing Rows</h3>
84 <p>Adding row wrappers allow you to manually specify you want a new row to begin.</p>
85
86 <div class="ui three column grid">
87 <div class="column"></div>
88 <div class="row">
89 <div class="column"></div>
90 <div class="column"></div>
91 <div class="column"></div>
92 </div>
93 </div>
94
95 <h3>Specifying Row Width</h3>
96 <p>Specifying a grid column count will divide columns into rows of predetermined column count. Additional columns will automatically flow to the next row.</p>
97 <div class="ui three column grid">
98 <div class="column">column</div>
99 <div class="column">column</div>
100 <div class="column">column</div>
101 <div class="column">column</div>
102 <div class="column">column</div>
103 <div class="column">column</div>
104 </div>
105
106 <h3>Specifying Column Width</h3>
107 <p>You can also specify column widths for each column individually</p>
108 <div class="ui three column grid">
109 <div class="four wide column">four wide column</div>
110 <div class="eight wide column">eight wide column</div>
111 <div class="four wide column">four wide column</div>
112 </div>
113
114 <h3>Special Variations</h3>
115 <p>Some special variations that format grids like tables require you to specify rows. For example a <code>divided grid</code> or a <code>celled grid</code> requires row wrappers.</p>
116
117 <div class="ui horizontal section divider">Celled Grid</div>
118 <div class="ui celled grid">
119 <div class="row">
120 <div class="four wide column"></div>
121 <div class="four wide column"></div>
122 <div class="four wide column"></div>
123 <div class="four wide column"></div>
124 </div>
125 <div class="row">
126 <div class="four wide column"></div>
127 <div class="four wide column"></div>
128 <div class="four wide column"></div>
129 <div class="four wide column"></div>
130 </div>
131 </div>
132
133 <div class="ui horizontal section divider">Internally Celled Grid</div>
134
135 <div class="ui internally celled grid">
136 <div class="row">
137 <div class="four wide column"></div>
138 <div class="four wide column"></div>
139 <div class="four wide column"></div>
140 <div class="four wide column"></div>
141 </div>
142 <div class="row">
143 <div class="four wide column"></div>
144 <div class="four wide column"></div>
145 <div class="four wide column"></div>
146 <div class="four wide column"></div>
147 </div>
148 </div>
149
150
151 <div class="ui horizontal section divider">Divided Grid</div>
152
153 <div class="ui divided grid">
154 <div class="row">
155 <div class="four wide column"></div>
156 <div class="four wide column"></div>
157 <div class="four wide column"></div>
158 <div class="four wide column"></div>
159 </div>
160 <div class="row">
161 <div class="four wide column"></div>
162 <div class="four wide column"></div>
163 <div class="four wide column"></div>
164 <div class="four wide column"></div>
165 </div>
166 </div>
167
168 <div class="ui horizontal section divider">Vertically Divided Grid</div>
169
170 <div class="ui vertically divided grid">
171 <div class="row">
172 <div class="four wide column"></div>
173 <div class="four wide column"></div>
174 <div class="four wide column"></div>
175 <div class="four wide column"></div>
176 </div>
177 <div class="row">
178 <div class="four wide column"></div>
179 <div class="four wide column"></div>
180 <div class="four wide column"></div>
181 <div class="four wide column"></div>
182 </div>
183 </div>
184
185 <h1 class="ui dividing header">Adjusting Grids</h1>
186
187
188 <h3 class="first">Centering Content</h3>
189 <p>If a row does not take up all sixteen grid columns, you can use a <code>ui centered grid</code>, <code>centered row</code>, or <code>centered column</code> to center the column contents inside the grid.
190 </p>
191 <div class="ui two column centered grid">
192 <div class="column"></div>
193 <div class="four column centered row">
194 <div class="column"></div>
195 <div class="column"></div>
196 </div>
197 </div>
198
199 <h3>Floating Rows</h3>
200 <p>Since Semantic UI's grid is based on flex box, a <code>left floated</code> item should come first, and a <code>right floated</code> item last in its row.</p>
201
202 <div class="ui grid">
203 <div class="left floated six wide column">
204 <div class="ui segment">
205 Left floated
206 </div>
207 </div>
208 <div class="right floated six wide column">
209 <div class="ui segment">
210 Right floated
211 </div>
212 </div>
213 </div>
214
215
216 <h3>Text Alignment</h3>
217 <p>You can specify text alignment using alignment variations on a grid, row, or column level.</p>
218
219 <div class="ui grid">
220 <div class="right aligned eight wide column">
221 right aligned column
222 </div>
223 <div class="left aligned eight wide column">
224 left aligned column
225 </div>
226 <div class="center aligned two column row">
227 <div class="column">
228 center aligned row
229 </div>
230 <div class="column">
231 center aligned row
232 </div>
233 </div>
234 <div class="sixteen wide right aligned column">
235 right aligned column
236 </div>
237 </div>
238
239 <h3>Vertical Alignment</h3>
240 <p>You can specify vertical alignment on a grid, row, or column level.</p>
241 <div class="ui middle aligned four column centered grid">
242 <div class="row">
243 <div class="column">
244 <img class="ui wireframe image" src="assets/images/wireframe/image.png">
245 </div>
246 <div class="column">
247 <img class="ui wireframe image" src="assets/images/wireframe/image.png">
248 <img class="ui wireframe image" src="assets/images/wireframe/image.png">
249 </div>
250 <div class="column">
251 <img class="ui wireframe image" src="assets/images/wireframe/image.png">
252 </div>
253 </div>
254 </div>
255
256 <h3>Equal Width Columns</h3>
257 <p>Specifying an <code>equal width grid</code> will automatically determine column sizes to fit evenly inside one row</p>
258 <div class="ui equal width grid">
259 <div class="row">
260 <div class="column">column</div>
261 <div class="column">column</div>
262 <div class="column">column</div>
263 <div class="column">column</div>
264 </div>
265 <div class="row">
266 <div class="column">column</div>
267 <div class="column">column</div>
268 <div class="column">column</div>
269 </div>
270 </div>
271
272
273 <h1>Responsive Patterns</h1>
274
275 <h3 class="first">Doubling</h3>
276 <p>You can set columns to double in width at each device jump</p>
277 <div class="ui five column doubling grid">
278 <div class="column">column</div>
279 <div class="column">column</div>
280 <div class="column">column</div>
281 <div class="column">column</div>
282 <div class="column">column</div>
283 </div>
284
285 <h3>Stackable</h3>
286 <p>You can set columns to stack on mobile</p>
287 <div class="ui three column stackable grid">
288 <div class="column">column</div>
289 <div class="column">column</div>
290 <div class="column">column</div>
291 </div>
292
293 <h3>Responsive Width Adjustments</h3>
294 <p>You can specify columns to appear at different widths on different screens</p>
295
296 <div class="ui grid">
297 <div class="eight wide mobile six wide tablet four wide computer column"></div>
298 <div class="eight wide mobile six wide tablet four wide computer column"></div>
299 <div class="eight wide mobile six wide tablet four wide computer column"></div>
300 <div class="eight wide mobile six wide tablet four wide computer column"></div>
301 <div class="eight wide mobile six wide tablet four wide computer column"></div>
302 </div>
303 <div class="ui grid">
304 <div class="four wide two wide large screen one wide widescreen column"></div>
305 <div class="four wide two wide large screen one wide widescreen column"></div>
306 <div class="four wide two wide large screen one wide widescreen column"></div>
307 <div class="four wide two wide large screen one wide widescreen column"></div>
308 </div>
309
310 <h3>Specifying Device Visibility</h3>
311 <p>You can specify columns to appear only a particular screen</p>
312 <div class="ui grid">
313 <div class="two column computer only row">
314 <div class="ten wide column">ten wide column computer only</div>
315 <div class="six wide column">six wide column computer only</div>
316 </div>
317 <div class="sixteen wide mobile only column">sixteen wide column mobile only</div>
318 <div class="three column computer only row">
319 <div class="column">computer only row</div>
320 <div class="column">computer only row</div>
321 <div class="column">computer only row</div>
322 </div>
323 <div class="two column mobile only row">
324 <div class="column">mobile only column</div>
325 <div class="column">mobile only column</div>
326 </div>
327 <div class="two column row">
328 <div class="column">column</div>
329 <div class="column">column</div>
330 </div>
331 </div>
332
333 </div>
334
335
336<style type="text/css">
337
338/* Some basic formatting */
339code {
340 background-color: #E0E0E0;
341 padding: 0.25em 0.3em;
342 font-family: 'Lato';
343 font-weight: bold;
344}
345.container {
346 padding: 5em 0em;
347}
348.ui.dividing.header,
349.first {
350 margin-top: 5em;
351}
352
353.ui.dividing.header:first-child {
354 margin-top: 0em;
355}
356
357h1,
358h3 {
359 margin-top: 10em;
360}
361
362img {
363 display: block;
364 max-width: 100%;
365}
366img + img {
367 margin-top: 0.5em;
368}
369
370/* Shows content box (not negative margins) */
371.grid {
372 position: relative;
373}
374.grid:before {
375 position: absolute;
376 top: 1rem;
377 left: 1rem;
378 background-color: #F0F0F0;
379 content: '';
380 width: calc(100% - 2rem);
381 height: calc(100% - 2rem);
382 box-shadow: 0px 0px 0px 1px #DDDDDD inset;
383}
384.ui.divided.grid:before,
385.celled.grid:before {
386 display: none;
387}
388.ui.aligned .column:after {
389 display: none !important;
390}
391.grid .column:not(.row):not(.grid):after {
392 background-color: rgba(86, 61, 124, .15);
393 box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset;
394 content: "";
395 display: block;
396 min-height: 50px;
397}
398@media only screen and (max-width: 768px) {
399 .stackable.grid:before {
400 width: 100%;
401 left: 0em;
402 }
403}
404</style>
405</body>
406
407</html>