@@include('./parts/head.html', { "plugin_fa_icons": true, "plugin_mdi_icons": true, "plugin_ion_icons": true, "plugin_wi_icons": true, "plugin_rickshaw": false, "plugin_nvd3": false, "plugin_flot": false, "plugin_sparkline": false, "plugin_markitup": false, "plugin_ckeditor": false, "plugin_select2": false, "plugin_dropzone": false, "plugin_tagsinput": false, "plugin_clockpicker": false, "plugin_pikaday": false, "plugin_spectrum": false, "plugin_inputmask": false, "plugin_parsley": false, "plugin_gmaps": false, "plugin_jvectormap": false, "plugin_datatables": false, "plugin_fullcalendar": false, "plugin_simpleweather": false, "plugin_prettify": true }) @@include('./parts/top-navbar.html') @@include('./parts/sidebar.html', { "page": "css-grid", "classes": "yay-shrink yay-hide-to-small yay-gestures" })
@@include('./parts/title.html', { "title": "Grid", "crumbs": "
  • Dashboard
  • CSS
  • Grid
    • " })
    Con uses a standard 12 column fluid responsive grid system. The grid helps you layout your page in an ordered, easy fashion.

    12 Columns

    No matter the size of the browser, each of these columns will always have an equal width.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    To get a feel of how the grid is used in HTML. Take a look at this code below which will produce a similar result as the one above. 
    <div class="row">
  <div class="col s1"><div>1</div></div>
  <div class="col s1"><div>2</div></div>
  <div class="col s1"><div>3</div></div>
  <div class="col s1"><div>4</div></div>
  <div class="col s1"><div>5</div></div>
  <div class="col s1"><div>6</div></div>
  <div class="col s1"><div>7</div></div>
  <div class="col s1"><div>8</div></div>
  <div class="col s1"><div>9</div></div>
  <div class="col s1"><div>10</div></div>
  <div class="col s1"><div>11</div></div>
  <div class="col s1"><div>12</div></div>
</div>

    Note: For now, just know that the s1 stands for small-1 which in plain English means "1 column on small screens".

    Columns live inside Rows

    Remember when you are creating your layout that all columns must be contained inside a row and that you must add the col class to your inner divs to make them into columns

    This div is 12-columns wide on all screen sizes
    6-columns (one-half)
    6-columns (one-half)
    <div class="row">
  <div class="col s12"><div>This div is 12-columns wide</div></div>
  <div class="col s6"><div>This div is 6-columns wide</div></div>
  <div class="col s6"><div>This div is 6-columns wide</div></div>
</div>

    Offsets

    To offset, simply add offset-s2 to the class where s 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.

    This div is 12-columns wide on all screen sizes
    6-columns (offset-by-6)
    <div class="row">
  <div class="col s12"><span class="flow-text">This div is 12-columns wide on all screen sizes</span></div>
  <div class="col s6 offset-s6"><span class="flow-text">6-columns (offset-by-6)</span></div>
</div>

    Creating Layouts

    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.

    Section

    The section class is used for simple top and bottom padding. Just add the section class to your div's containing large blocks of content.

    Divider

    Dividers are 1 pixel lines that help break up your content. Just add the divider to a div in between your content.

    Example Sections and Dividers

    Section 1

    Stuff

    Section 2

    Stuff

    Section 3

    Stuff

    <div class="divider"></div>
<div class="section">
  <h5>Section 1</h5>
  <p>Stuff</p>
</div>
<div class="divider"></div>
<div class="section">
  <h5>Section 2</h5>
  <p>Stuff</p>
</div>
<div class="divider"></div>
<div class="section">
  <h5>Section 3</h5>
  <p>Stuff</p>
</div>

    Creating Responsive Layouts

    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.

    Screen Sizes

    Mobile Devices
    <= 600px    		 Tablet Devices
    <= 992px    		 Desktop Devices
    >= 992px
    Class Prefix .s .m .l
    Number of Columns 12 12 12

    Adding Responsiveness

    In the previous examples, we only defined the size for small screens using "col s12". This is fine if we want a fixed layout since the rules propogate upwards. By just saying s12, we are essentially saying "col s12 m12 l12". But by explicitly defining the size we can make our website more responsive.

    I am always full-width (col s12)
    I am full-width on mobile (col s12 m6)
    <div class="row white-text center-align">
  <div class="col s12"><div class="flow-text blue">I am always full-width (col s12)</div></div>
  <div class="col s12 m6"><div class="flow-text blue">I am full-width on mobile (col s12 m6)</div></div>
</div>

    More Responsive Grid Examples

    s12
    s12 m4 l2
    s12 m4 l8
    s12 m4 l2
    s12 m6 l3
    s12 m6 l3
    s12 m6 l3
    s12 m6 l3
    <div class="row">
  <div class="col s12"><div>s12</div></div>
  <div class="col s12 m3 l2"><div>s12 m4</div></div>
  <div class="col s12 m6 l8"><div>s12 m4</div></div>
  <div class="col s12 m3 l2"><div>s12 m4</div></div>
</div>
<div class="row">
  <div class="col s12 m6 l3"><div>s12 m6 l3</div></div>
  <div class="col s12 m6 l3"><div>s12 m6 l3</div></div>
  <div class="col s12 m6 l3"><div>s12 m6 l3</div></div>
  <div class="col s12 m6 l3"><div>s12 m6 l3</div></div>
</div>
    @@include('./parts/search-bar.html') @@include('./parts/chat.html') @@include('./parts/foot.html', { "copyright": true })