UNPKG

33.9 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="msapplication-tap-highlight" content="no">
8 <meta name="description" content="Materialize is a modern responsive CSS framework based on Material Design by Google. ">
9 <title>Grid - Materialize</title>
10 <!-- Favicons-->
11 <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
12 <meta name="msapplication-TileColor" content="#FFFFFF">
13 <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
14 <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
15 <!-- Android 5 Chrome Color-->
16 <meta name="theme-color" content="#EE6E73">
17 <!-- CSS-->
18 <link href="css/prism.css" rel="stylesheet">
19 <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
20 <link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
21 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
22 <script>
23 window.liveSettings = {
24 api_key: "a0b49b34b93844c38eaee15690d86413",
25 picker: "bottom-right",
26 detectlang: true,
27 dynamic: true,
28 autocollect: true
29 };
30 </script>
31 <script src="//cdn.transifex.com/live.js"></script>
32 </head>
33 <body>
34 <header>
35 <nav class="top-nav">
36 <div class="container">
37 <div class="nav-wrapper"><a class="page-title">Grid</a></div>
38 </div>
39 </nav>
40 <div class="container"><a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"><i class="material-icons">menu</i></a></div>
41 <ul id="nav-mobile" class="side-nav fixed">
42 <li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo">
43 <object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
44 <li class="search">
45 <div class="search-wrapper card">
46 <input id="search"><i class="material-icons">search</i>
47 <div class="search-results"></div>
48 </div>
49 </li>
50 <li class="bold"><a href="about.html" class="waves-effect waves-teal">About</a></li>
51 <li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li>
52 <li class="no-padding">
53 <ul class="collapsible collapsible-accordion">
54 <li class="bold"><a class="collapsible-header active waves-effect waves-teal">CSS</a>
55 <div class="collapsible-body">
56 <ul>
57 <li><a href="color.html">Color</a></li>
58 <li class="active"><a href="grid.html">Grid</a></li>
59 <li><a href="helpers.html">Helpers</a></li>
60 <li><a href="media-css.html">Media</a></li>
61 <li><a href="sass.html">Sass</a></li>
62 <li><a href="shadow.html">Shadow</a></li>
63 <li><a href="table.html">Table</a></li>
64 <li><a href="css-transitions.html">Transitions</a></li>
65 <li><a href="typography.html">Typography</a></li>
66 </ul>
67 </div>
68 </li>
69 <li class="bold"><a class="collapsible-header waves-effect waves-teal">Components</a>
70 <div class="collapsible-body">
71 <ul>
72 <li><a href="badges.html">Badges</a></li>
73 <li><a href="buttons.html">Buttons</a></li>
74 <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
75 <li><a href="cards.html">Cards</a></li>
76 <li><a href="chips.html">Chips</a></li>
77 <li><a href="collections.html">Collections</a></li>
78 <li><a href="footer.html">Footer</a></li>
79 <li><a href="forms.html">Forms</a></li>
80 <li><a href="icons.html">Icons</a></li>
81 <li><a href="navbar.html">Navbar</a></li>
82 <li><a href="pagination.html">Pagination</a></li>
83 <li><a href="preloader.html">Preloader</a></li>
84 </ul>
85 </div>
86 </li>
87 <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
88 <div class="collapsible-body">
89 <ul>
90 <li><a href="carousel.html">Carousel</a></li>
91 <li><a href="collapsible.html">Collapsible</a></li>
92 <li><a href="dialogs.html">Dialogs</a></li>
93 <li><a href="dropdown.html">Dropdown</a></li>
94 <li><a href="media.html">Media</a></li>
95 <li><a href="modals.html">Modals</a></li>
96 <li><a href="parallax.html">Parallax</a></li>
97 <li><a href="pushpin.html">Pushpin</a></li>
98 <li><a href="scrollfire.html">ScrollFire</a></li>
99 <li><a href="scrollspy.html">Scrollspy</a></li>
100 <li><a href="side-nav.html">SideNav</a></li>
101 <li><a href="tabs.html">Tabs</a></li>
102 <li><a href="transitions.html">Transitions</a></li>
103 <li><a href="waves.html">Waves</a></li>
104 </ul>
105 </div>
106 </li>
107 </ul>
108 </li>
109 <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li>
110 <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li>
111 </ul>
112 </header>
113 <main><div class="container">
114 <div class="row">
115
116 <div class="col s12 m9 l10">
117
118
119 <div>
120 <div id="grid-container" class="section scrollspy">
121 <p class="caption">We are using a standard 12 column fluid responsive grid system. The grid helps you layout your page in an ordered, easy fashion.</p>
122 <h3 class="header">Container</h3>
123 <p>The container class is not strictly part of the grid but is important in laying out content. It allows you to center your page content. The <code class="language-markup">container</code> class is set to ~70% of the window width. It helps you center and contain your page content. We use the container to contain our body content.
124
125 <h4>Demo</h4>
126 <p>Try the button below to see what the page looks like without containers</p>
127 <a id="container-toggle-button" class="btn waves-effect waves-light">Turn off Containers</a>
128
129 <!-- Container Visual Demo -->
130 <div class="row">
131 <div class="col s12">
132 <div class='browser-window'>
133 <div class='top-bar'>
134 <div class='circles'>
135 <div id="close-circle" class="circle"></div>
136 <div id="minimize-circle" class="circle"></div>
137 <div id="maximize-circle" class="circle"></div>
138 </div>
139 </div>
140 <div class='content'>
141 <div class="row">
142
143 <div id="site-layout-example-top" class="col s12">
144 <!-- <p class="flat-text-logo"></p> -->
145 </div>
146 <div id="site-layout-example-right" class="col s12">
147 <div class="container">
148
149 <p class="flat-text small"></p>
150 <p class="flat-text full-width"></p>
151 <p class="flat-text full-width"></p>
152 <p class="flat-text full-width"></p>
153 </div>
154 </div>
155 </div>
156 </div>
157 </div>
158 </div>
159 </div>
160
161
162 <p>To add a container just put your content inside a <code class="language-markup">&lt;div></code> tag with a <code class="language-markup">container</code> class. Here's an example of how your page might be set up.</p>
163
164 <pre><code class="language-markup">
165 &lt;body>
166 &lt;div class="container">
167 &lt;!-- Page Content goes here -->
168 &lt;/div>
169 &lt;/body>
170 </code></pre>
171
172 </div>
173
174
175 <!-- Grid visual demo -->
176 <div id="grid-intro" class="scrollspy">
177 <h3 class="header">Introduction</h3>
178 <p>Take a look at this section to quickly understand how the grid works!</p>
179 <h4>12 Columns</h4>
180 <p>Our standard grid has 12 columns. No matter the size of the browser, each of these columns will always have an equal width.</p>
181 <div class="row">
182 <div class="col s1 grid-example"><span class="flow-text">1</span></div>
183 <div class="col s1 grid-example"><span class="flow-text">2</span></div>
184 <div class="col s1 grid-example"><span class="flow-text">3</span></div>
185 <div class="col s1 grid-example"><span class="flow-text">4</span></div>
186 <div class="col s1 grid-example"><span class="flow-text">5</span></div>
187 <div class="col s1 grid-example"><span class="flow-text">6</span></div>
188 <div class="col s1 grid-example"><span class="flow-text">7</span></div>
189 <div class="col s1 grid-example"><span class="flow-text">8</span></div>
190 <div class="col s1 grid-example"><span class="flow-text">9</span></div>
191 <div class="col s1 grid-example"><span class="flow-text">10</span></div>
192 <div class="col s1 grid-example"><span class="flow-text">11</span></div>
193 <div class="col s1 grid-example"><span class="flow-text">12</span></div>
194 </div>
195 <p>To get a feel of how the grid is used in HTML, take a look at the code below which will produce a similar result to the one above.</p>
196 <pre><code class="language-markup">
197 &lt;div class="row">
198 &lt;div class="col s1">1&lt;/div>
199 &lt;div class="col s1">2&lt;/div>
200 &lt;div class="col s1">3&lt;/div>
201 &lt;div class="col s1">4&lt;/div>
202 &lt;div class="col s1">5&lt;/div>
203 &lt;div class="col s1">6&lt;/div>
204 &lt;div class="col s1">7&lt;/div>
205 &lt;div class="col s1">8&lt;/div>
206 &lt;div class="col s1">9&lt;/div>
207 &lt;div class="col s1">10&lt;/div>
208 &lt;div class="col s1">11&lt;/div>
209 &lt;div class="col s1">12&lt;/div>
210 &lt;/div>
211 </code></pre>
212 <p>Note: For now, just know that the <code class="language-markup">s1</code> stands for small-1 which in plain English means "1 column on small screens".</p>
213
214 <br>
215
216 <h4>Columns live inside Rows</h4>
217 <p>Remember when you are creating your layout that all columns must be contained inside a row and that you must add the <code class="language-markup">col</code> class to your inner divs to make them into columns</p>
218 <div class="row">
219 <div class="col s12 grid-example"><span class="flow-text">This div is 12-columns wide on all screen sizes</span></div>
220 <div class="col s6 grid-example"><span class="flow-text">6-columns (one-half)</span></div>
221 <div class="col s6 grid-example"><span class="flow-text">6-columns (one-half)</span></div>
222 </div>
223 <pre><code class="language-markup">
224 &lt;div class="row">
225 &lt;div class="col s12">This div is 12-columns wide&lt;/div>
226 &lt;div class="col s6">This div is 6-columns wide&lt;/div>
227 &lt;div class="col s6">This div is 6-columns wide&lt;/div>
228 &lt;/div>
229 </code></pre>
230
231 <br>
232 </div>
233
234 <!-- Grid Offsets -->
235 <div id="grid-offsets" class="section scrollspy">
236 <h2 class="header">Offsets</h2>
237 <p>To offset, simply add <code class="language-markup">offset-s2</code> to the class where <code class="language-markup">s</code> signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to offset by.</p>
238 <div class="row">
239 <div class="col s12 grid-example"><span class="flow-text">This div is 12-columns wide on all screen sizes</span></div>
240 <div class="col s6 offset-s6 grid-example"><span class="flow-text">6-columns (offset-by-6)</span></div>
241 </div>
242 <pre><code class="language-markup">
243 &lt;div class="row">
244 &lt;div class="col s12">&lt;span class="flow-text">This div is 12-columns wide on all screen sizes&lt;/span>&lt;/div>
245 &lt;div class="col s6 offset-s6">&lt;span class="flow-text">6-columns (offset-by-6)&lt;/span>&lt;/div>
246 &lt;/div>
247 </code></pre>
248 </div>
249
250 <br>
251
252 <!-- Grid push and pull -->
253 <div id="grid-push" class="section scrollspy">
254 <h2 class="header">Push and Pull</h2>
255 <p>You can easily change the order of your columns with push and pull. Simply add <code class="language-markup">push-s2</code> or <code class="language-markup">pull-s2</code> to the class where <code class="language-markup">s</code> signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to push or pull by.</p>
256 <div class="row">
257 <div class="col s7 push-s5 grid-example"><span style="font-size: 14px;">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
258 <div class="col s5 pull-s7 grid-example"><span style="font-size: 14px;">5-columns wide pulled to the left by 7-columns.</span></div>
259 </div>
260 <pre><code class="language-markup">
261 &lt;div class="row">
262 &lt;div class="col s7 push-s5">&lt;span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.&lt;/span>&lt;/div>
263 &lt;div class="col s5 pull-s7">&lt;span class="flow-text">5-columns wide pulled to the left by 7-columns.&lt;/span>&lt;/div>
264 &lt;/div>
265 </code></pre>
266 </div>
267
268 <br>
269
270 <!-- Creating Layouts -->
271 <div id="grid-layouts" class="scrollspy">
272 <h3 class="header">Creating Layouts</h3>
273 <p>Here we will show you how to create some commonly used layouts with our grid system. Hopefully these will get you more comfortable with laying out elements. To keep these demos simple, the ones here will not be responsive.</p>
274 <div class="row">
275 <div class="col s12 m6">
276 <h4>Section</h4>
277 <p>The section class is used for simple top and bottom padding. Just add the <code class="language-markup">section</code> class to your div's containing large blocks of content.</p>
278 </div>
279 <div class="col s12 m6">
280 <h4>Divider</h4>
281 <p>Dividers are 1 pixel lines that help break up your content. Just add the <code class="language-markup">divider</code> to a div in between your content.</p>
282 </div>
283 </div>
284
285 <h4>Example Sections and Dividers</h4>
286 <div class="divider"></div>
287 <div class="section">
288 <h5>Section 1</h5>
289 <p>Stuff</p>
290 </div>
291 <div class="divider"></div>
292 <div class="section">
293 <h5>Section 2</h5>
294 <p>Stuff</p>
295 </div>
296 <div class="divider"></div>
297 <div class="section">
298 <h5>Section 3</h5>
299 <p>Stuff</p>
300 </div>
301 <div class="divider"></div>
302 <pre><code class="language-markup">
303 &lt;div class="divider">&lt;/div>
304 &lt;div class="section">
305 &lt;h5>Section 1&lt;/h5>
306 &lt;p>Stuff&lt;/p>
307 &lt;/div>
308 &lt;div class="divider">&lt;/div>
309 &lt;div class="section">
310 &lt;h5>Section 2&lt;/h5>
311 &lt;p>Stuff&lt;/p>
312 &lt;/div>
313 &lt;div class="divider">&lt;/div>
314 &lt;div class="section">
315 &lt;h5>Section 3&lt;/h5>
316 &lt;p>Stuff&lt;/p>
317 &lt;/div>
318 </code></pre><br>
319
320 <h4>Example Promotion Table</h4>
321 <p>If we want 3 divs that are equal size, we define the divs with a width of 4-columns, 4+4+4 = 12, which nicely adds up to 12. Inside those divs, we can put our content. Take our front page content for example. We've modified it slightly for the sake of this example.</p>
322 <div class="row">
323 <div class="col s4">
324 <div class="center promo promo-example">
325 <i class="material-icons">flash_on</i>
326 <p class="promo-caption">Speeds up development</p>
327 <p class="light center">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components.</p>
328 </div>
329 </div>
330 <div class="col s4">
331 <div class="center promo promo-example">
332 <i class="material-icons">group</i>
333 <p class="promo-caption">User Experience Focused</p>
334 <p class="light center">By utilizing elements and principles of Material Design, we were able to create a framework that focuses on User Experience.</p>
335 </div>
336 </div>
337 <div class="col s4">
338 <div class="center promo promo-example">
339 <i class="material-icons">settings</i>
340 <p class="promo-caption">Easy to work with</p>
341 <p class="light center">We have provided detailed documentation as well as specific code examples to help new users get started.</p>
342 </div>
343 </div>
344 </div>
345
346 <pre><code class="language-markup">
347 &lt;div class="row">
348
349 &lt;div class="col s4">
350 &lt;!-- Promo Content 1 goes here -->
351 &lt;/div>
352 &lt;div class="col s4">
353 &lt;!-- Promo Content 2 goes here -->
354 &lt;/div>
355 &lt;div class="col s4">
356 &lt;!-- Promo Content 3 goes here -->
357 &lt;/div>
358
359 &lt;/div>
360 </code></pre>
361
362 <br>
363
364 <h4>Example Side Navigation Layout</h4>
365 <p>You can see how easy it is to create layouts using the grid system. Just remember to make sure your column numbers add up to 12 for an even layout.</p>
366
367 <div class="row">
368 <div class="col s12">
369 <div class='browser-window'>
370 <div class='top-bar'>
371 <div class='circles'>
372 <div id="close-circle" class="circle"></div>
373 <div id="minimize-circle" class="circle"></div>
374 <div id="maximize-circle" class="circle"></div>
375 </div>
376 </div>
377 <div class='content'>
378 <div class="row">
379
380 <div id="site-layout-example-top" class="col s12">
381 <!-- <p class="flat-text-logo"></p> -->
382 </div>
383 <div id="site-layout-example-left" class="col s3">
384 <p class="flat-text-header"></p>
385 <p class="flat-text"></p>
386 <p class="flat-text"></p>
387 </div>
388 <div id="site-layout-example-right" class="col s9">
389 <p class="flat-text"></p>
390 <p class="flat-text"></p>
391 <p class="flat-text"></p>
392 <p class="flat-text"></p>
393 </div>
394 </div>
395 </div>
396 </div>
397 </div>
398 </div>
399
400 <pre><code class="language-markup">
401 &lt;!-- Navbar goes here -->
402
403 &lt;!-- Page Layout here -->
404 &lt;div class="row">
405
406 &lt;div class="col s3">
407 &lt;!-- Grey navigation panel -->
408 &lt;/div>
409
410 &lt;div class="col s9">
411 &lt;!-- Teal page content -->
412 &lt;/div>
413
414 &lt;/div>
415 </code></pre>
416 </div>
417
418
419 <!-- Creating Responsive Layouts -->
420 <div id="grid-responsive" class="scrollspy">
421 <h3 class="header">Creating Responsive Layouts</h3>
422 <p>Above we showed you how to layout elements using our grid system. Now we'll show you how to design your layouts so that they look great on all screen sizes.</p>
423 <h4>Screen Sizes</h4>
424 <table class="highlight">
425 <thead>
426 <tr>
427 <th></th>
428 <th data-field="id">Mobile Devices <br>&lt;= 600px</th>
429 <th data-field="name">Tablet Devices <br>&lt;= 992px</th>
430 <th data-field="price">Desktop Devices <br>&gt; 992px</th>
431 </tr>
432 </thead>
433 <tbody>
434 <tr>
435 <td><strong>Class Prefix</strong></td>
436 <td><code class="language-markup">.s</code></td>
437 <td><code class="language-markup">.m</code></td>
438 <td><code class="language-markup">.l</code></td>
439 </tr>
440 <tr>
441 <td><strong>Container Width</strong></td>
442 <td>85%</td>
443 <td>85%</td>
444 <td>70%</td>
445 </tr>
446 <tr>
447 <td><strong>Number of Columns</strong></td>
448 <td>12</td>
449 <td>12</td>
450 <td>12</td>
451 </tr>
452 </tbody>
453 </table>
454
455 <br>
456
457 <h4>Adding Responsiveness</h4>
458 <p>In the previous examples, we only defined the size for small screens using <code class="language-markup">"col s12"</code>. This is fine if we want a fixed layout since the rules propagate upwards. By just saying s12, we are essentially saying <code class="language-markup">"col s12 m12 l12"</code>. But by explicitly defining the size we can make our website more responsive.</p>
459
460 <div class="row">
461 <div class="grid-example col s12 teal lighten-2"><span class="flow-text">I am always full-width (col s12)</span></div>
462 <div class="grid-example col s12 m6 teal lighten-2"><span class="flow-text">I am full-width on mobile (col s12 m6)</span></div>
463 </div>
464 <pre><code class="language-markup">
465 &lt;div class="row">
466 &lt;div class="grid-example col s12">&lt;span class="flow-text">I am always full-width (col s12)&lt;/span>&lt;/div>
467 &lt;div class="grid-example col s12 m6">&lt;span class="flow-text">I am full-width on mobile (col s12 m6)&lt;/span>&lt;/div>
468 &lt;/div>
469 </code></pre>
470
471 <br>
472
473 <h4>Responsive Side Navigation Layout</h4>
474 <p>In this example below, we take the same layout from above, but we make it responsive by defining how many columns the div should take up on each screen size. Try resizing your browser and watch the layout change below.</p>
475
476 <div class="row">
477 <div class="col s12">
478 <div class='browser-window'>
479 <div class='top-bar'>
480 <div class='circles'>
481 <div id="close-circle" class="circle"></div>
482 <div id="minimize-circle" class="circle"></div>
483 <div id="maximize-circle" class="circle"></div>
484 </div>
485 </div>
486 <div class='content'>
487 <div class="row">
488
489 <div id="site-layout-example-top" class="col s12">
490 <!-- <p class="flat-text-logo"></p> -->
491 </div>
492 <div id="site-layout-example-left" class="col s12 m4 l3">
493 <p class="flat-text-header"></p>
494 <p class="flat-text"></p>
495 <p class="flat-text"></p>
496 </div>
497 <div id="site-layout-example-right" class="col s12 m8 l9">
498 <p class="flat-text"></p>
499 <p class="flat-text"></p>
500 <p class="flat-text"></p>
501 <p class="flat-text"></p>
502 </div>
503 </div>
504 </div>
505 </div>
506 </div>
507 </div>
508
509 <pre><code class="language-markup">
510 &lt;!-- Navbar goes here -->
511
512 &lt;!-- Page Layout here -->
513 &lt;div class="row">
514
515 &lt;div class="col s12 m4 l3"> &lt;!-- Note that "m4 l3" was added -->
516 &lt;!-- Grey navigation panel
517
518 This content will be:
519 3-columns-wide on large screens,
520 4-columns-wide on medium screens,
521 12-columns-wide on small screens -->
522
523 &lt;/div>
524
525 &lt;div class="col s12 m8 l9"> &lt;!-- Note that "m8 l9" was added -->
526 &lt;!-- Teal page content
527
528 This content will be:
529 9-columns-wide on large screens,
530 8-columns-wide on medium screens,
531 12-columns-wide on small screens -->
532
533 &lt;/div>
534
535 &lt;/div>
536 </code></pre>
537
538 <h4>More Responsive Grid Examples</h4>
539 <div class="row">
540 <div class="col grid-example s12 blue lighten-1"><span class="flow-text">s12</span></div>
541 <div class="col grid-example s12 m4 l2 teal lighten-1"><span class="flow-text">s12 m4 l2</span></div>
542 <div class="col grid-example s12 m4 l8 teal lighten-1"><span class="flow-text">s12 m4 l8</span></div>
543 <div class="col grid-example s12 m4 l2 teal lighten-1"><span class="flow-text">s12 m4 l2</span></div>
544 <div class="col grid-example s12 m6 l3 purple lighten-3"><span class="flow-text">s12 m6 l3</span></div>
545 <div class="col grid-example s12 m6 l3 purple lighten-3"><span class="flow-text">s12 m6 l3</span></div>
546 <div class="col grid-example s12 m6 l3 purple lighten-3"><span class="flow-text">s12 m6 l3</span></div>
547 <div class="col grid-example s12 m6 l3 purple lighten-3"><span class="flow-text">s12 m6 l3</span></div>
548 </div>
549 <div class="row">
550 <pre><code class="language-markup col s12">
551 &lt;div class="row">
552 &lt;div class="col s12">&lt;p>s12&lt;/p>&lt;/div>
553 &lt;div class="col s12 m4 l2">&lt;p>s12 m4&lt;/p>&lt;/div>
554 &lt;div class="col s12 m4 l8">&lt;p>s12 m4&lt;/p>&lt;/div>
555 &lt;div class="col s12 m4 l2">&lt;p>s12 m4&lt;/p>&lt;/div>
556 &lt;/div>
557 &lt;div class="row">
558 &lt;div class="col s12 m6 l3">&lt;p>s12 m6 l3&lt;/p>&lt;/div>
559 &lt;div class="col s12 m6 l3">&lt;p>s12 m6 l3&lt;/p>&lt;/div>
560 &lt;div class="col s12 m6 l3">&lt;p>s12 m6 l3&lt;/p>&lt;/div>
561 &lt;div class="col s12 m6 l3">&lt;p>s12 m6 l3&lt;/p>&lt;/div>
562 &lt;/div>
563 </code></pre>
564 </div>
565 </div>
566 </div>
567
568
569 </div>
570
571 <div class="col hide-on-small-only m3 l2">
572 <div class="toc-wrapper">
573 <div class="buysellads hide-on-small-only">
574 <!-- CarbonAds Zone Code -->
575 <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
576 </div>
577 <div style="height: 1px;">
578 <ul class="section table-of-contents">
579 <li><a href="#grid-container">Container</a></li>
580 <li><a href="#grid-intro">Introduction</a></li>
581 <li><a href="#grid-offsets">Offsets</a></li>
582 <li><a href="#grid-push">Push and Pull</a></li>
583 <li><a href="#grid-layouts">Creating Layouts</a></li>
584 <li><a href="#grid-responsive">Responsive Layouts</a></li>
585 </ul>
586 </div>
587 </div>
588 </div>
589
590 </div>
591</div>
592
593 </main> <footer class="page-footer">
594 <div class="container">
595 <div class="row">
596 <div class="col l4 s12">
597 <h5 class="white-text">Help Materialize Grow</h5>
598 <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
599 <form id="paypal-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
600<input type="hidden" name="cmd" value="_s-xclick">
601<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
602">
603<button class="btn waves-effect waves-light red lighten-3" type="submit" name="action" alt="PayPal - The safer, easier way to pay online!">Donate Now
604</button>
605</form>
606
607 </div>
608 <div class="col l4 s12">
609 <h5 class="white-text">Join the Discussion</h5>
610 <p class="grey-text text-lighten-4">We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.</p>
611 <a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
612 </div>
613 <div class="col l4 s12" style="overflow: hidden;">
614 <h5 class="white-text">Connect</h5>
615 <iframe src="http://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
616 <br>
617 <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
618 <br>
619 <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
620 </div>
621 </div>
622 </div>
623 <div class="footer-copyright">
624 <div class="container">
625 © 2014-2017 Materialize, All rights reserved.
626 <a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
627 </div>
628 </div>
629 </footer>
630
631 <!-- Scripts-->
632 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
633 <script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }
634 </script>
635 <script src="js/jquery.timeago.min.js"></script>
636 <script src="js/prism.js"></script>
637 <script src="jade/lunr.min.js"></script>
638 <script src="jade/search.js"></script>
639 <script src="bin/materialize.js"></script>
640 <script src="js/init.js"></script>
641 <!-- Twitter Button -->
642 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
643
644 <!-- Google Plus Button-->
645 <script src="https://apis.google.com/js/platform.js" async defer></script>
646
647 <!-- Google Analytics -->
648 <script>
649 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
650 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
651 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
652 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
653
654 ga('create', 'UA-56218128-1', 'auto');
655 ga('require', 'displayfeatures');
656 ga('send', 'pageview');
657 </script>
658
659 </body>
660</html>
\No newline at end of file