snipt

Ctrl+h for KB shortcuts

CSS

Grid styles

/* Grid */
.g-row, .g-podLast { 
    overflow: hidden;  
    // IE Hacks. Shh... Don't tell. 
    *overflow: visible; 
    *zoom: 1; 
    padding: 0 0.625em; 
} 
.g-pod { 
    float: left; 
    padding: 0 0.625em; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 
input[type=file].g-pod, select.g-pod, textarea.g-pod { 
    padding: 0; 
} 
.g-podRight { 
    float: right; 
} 
.g-col1of1 { 
    float: none; 
} 
.g-col1of2 { 
    width: 50%; 
} 
.g-col1of3 { 
    width: 33.33333%; 
} 
.g-col2of3 { 
    width: 66.66666%; 
} 
.g-col1of4 { 
    width: 25%; 
} 
.g-col3of4 { 
    width: 75%; 
} 
.g-col1of5 { 
    width: 20%; 
} 
.g-col2of5 { 
    width: 40%; 
} 
.g-col3of5 { 
    width: 60%; 
} 
.g-col4of5 { 
    width: 80%; 
} 
.g-podLast { 
    float: none; 
    width: auto; 
    // IE Hacks. Shh... Don't tell. 
    _position: relative; 
    _left: -3px; 
    _margin-right: -3px; 
} 
  
/* Smartphone Adjustments (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px)  
and (max-device-width : 480px) { 
    /* Styles */
    .g-pod{ 
        float: none !important;  
        width: auto !important; 
    } 
}
https://snipt.net/embed/585e1d679583bb6834fce7e1ffb91a08/
/raw/585e1d679583bb6834fce7e1ffb91a08/
585e1d679583bb6834fce7e1ffb91a08
css
CSS
70
2019-07-19T21:07:53
True
False
False
Aug 16, 2013 at 04:04 PM
/api/public/snipt/74712/
grid-styles
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a> <a href="#L-18">18</a> <a href="#L-19">19</a> <a href="#L-20">20</a> <a href="#L-21">21</a> <a href="#L-22">22</a> <a href="#L-23">23</a> <a href="#L-24">24</a> <a href="#L-25">25</a> <a href="#L-26">26</a> <a href="#L-27">27</a> <a href="#L-28">28</a> <a href="#L-29">29</a> <a href="#L-30">30</a> <a href="#L-31">31</a> <a href="#L-32">32</a> <a href="#L-33">33</a> <a href="#L-34">34</a> <a href="#L-35">35</a> <a href="#L-36">36</a> <a href="#L-37">37</a> <a href="#L-38">38</a> <a href="#L-39">39</a> <a href="#L-40">40</a> <a href="#L-41">41</a> <a href="#L-42">42</a> <a href="#L-43">43</a> <a href="#L-44">44</a> <a href="#L-45">45</a> <a href="#L-46">46</a> <a href="#L-47">47</a> <a href="#L-48">48</a> <a href="#L-49">49</a> <a href="#L-50">50</a> <a href="#L-51">51</a> <a href="#L-52">52</a> <a href="#L-53">53</a> <a href="#L-54">54</a> <a href="#L-55">55</a> <a href="#L-56">56</a> <a href="#L-57">57</a> <a href="#L-58">58</a> <a href="#L-59">59</a> <a href="#L-60">60</a> <a href="#L-61">61</a> <a href="#L-62">62</a> <a href="#L-63">63</a> <a href="#L-64">64</a> <a href="#L-65">65</a> <a href="#L-66">66</a> <a href="#L-67">67</a> <a href="#L-68">68</a> <a href="#L-69">69</a> <a href="#L-70">70</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="c">/* Grid */</span> </span><span id="L-2"><a name="L-2"></a><span class="nc">.g-row</span><span class="o">,</span> <span class="nc">.g-podLast</span> <span class="p">{</span> </span><span id="L-3"><a name="L-3"></a> <span class="nb">overflow</span><span class="o">:</span> <span class="nb">hidden</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a> <span class="o">//</span> <span class="n">IE</span> <span class="n">Hacks</span><span class="o">.</span> <span class="n">Shh</span><span class="o">...</span> <span class="n">Don</span><span class="s1">&#39;t tell. </span> </span><span id="L-5"><a name="L-5"></a><span class="s1"> *overflow: visible; </span> </span><span id="L-6"><a name="L-6"></a><span class="s1"> *zoom: 1; </span> </span><span id="L-7"><a name="L-7"></a><span class="s1"> padding: 0 0.625em; </span> </span><span id="L-8"><a name="L-8"></a><span class="s1">} </span> </span><span id="L-9"><a name="L-9"></a><span class="s1">.g-pod { </span> </span><span id="L-10"><a name="L-10"></a><span class="s1"> float: left; </span> </span><span id="L-11"><a name="L-11"></a><span class="s1"> padding: 0 0.625em; </span> </span><span id="L-12"><a name="L-12"></a><span class="s1"> -moz-box-sizing: border-box; </span> </span><span id="L-13"><a name="L-13"></a><span class="s1"> -webkit-box-sizing: border-box; </span> </span><span id="L-14"><a name="L-14"></a><span class="s1"> box-sizing: border-box; </span> </span><span id="L-15"><a name="L-15"></a><span class="s1">} </span> </span><span id="L-16"><a name="L-16"></a><span class="s1">input[type=file].g-pod, select.g-pod, textarea.g-pod { </span> </span><span id="L-17"><a name="L-17"></a><span class="s1"> padding: 0; </span> </span><span id="L-18"><a name="L-18"></a><span class="s1">} </span> </span><span id="L-19"><a name="L-19"></a><span class="s1">.g-podRight { </span> </span><span id="L-20"><a name="L-20"></a><span class="s1"> float: right; </span> </span><span id="L-21"><a name="L-21"></a><span class="s1">} </span> </span><span id="L-22"><a name="L-22"></a><span class="s1">.g-col1of1 { </span> </span><span id="L-23"><a name="L-23"></a><span class="s1"> float: none; </span> </span><span id="L-24"><a name="L-24"></a><span class="s1">} </span> </span><span id="L-25"><a name="L-25"></a><span class="s1">.g-col1of2 { </span> </span><span id="L-26"><a name="L-26"></a><span class="s1"> width: 50%; </span> </span><span id="L-27"><a name="L-27"></a><span class="s1">} </span> </span><span id="L-28"><a name="L-28"></a><span class="s1">.g-col1of3 { </span> </span><span id="L-29"><a name="L-29"></a><span class="s1"> width: 33.33333%; </span> </span><span id="L-30"><a name="L-30"></a><span class="s1">} </span> </span><span id="L-31"><a name="L-31"></a><span class="s1">.g-col2of3 { </span> </span><span id="L-32"><a name="L-32"></a><span class="s1"> width: 66.66666%; </span> </span><span id="L-33"><a name="L-33"></a><span class="s1">} </span> </span><span id="L-34"><a name="L-34"></a><span class="s1">.g-col1of4 { </span> </span><span id="L-35"><a name="L-35"></a><span class="s1"> width: 25%; </span> </span><span id="L-36"><a name="L-36"></a><span class="s1">} </span> </span><span id="L-37"><a name="L-37"></a><span class="s1">.g-col3of4 { </span> </span><span id="L-38"><a name="L-38"></a><span class="s1"> width: 75%; </span> </span><span id="L-39"><a name="L-39"></a><span class="s1">} </span> </span><span id="L-40"><a name="L-40"></a><span class="s1">.g-col1of5 { </span> </span><span id="L-41"><a name="L-41"></a><span class="s1"> width: 20%; </span> </span><span id="L-42"><a name="L-42"></a><span class="s1">} </span> </span><span id="L-43"><a name="L-43"></a><span class="s1">.g-col2of5 { </span> </span><span id="L-44"><a name="L-44"></a><span class="s1"> width: 40%; </span> </span><span id="L-45"><a name="L-45"></a><span class="s1">} </span> </span><span id="L-46"><a name="L-46"></a><span class="s1">.g-col3of5 { </span> </span><span id="L-47"><a name="L-47"></a><span class="s1"> width: 60%; </span> </span><span id="L-48"><a name="L-48"></a><span class="s1">} </span> </span><span id="L-49"><a name="L-49"></a><span class="s1">.g-col4of5 { </span> </span><span id="L-50"><a name="L-50"></a><span class="s1"> width: 80%; </span> </span><span id="L-51"><a name="L-51"></a><span class="s1">} </span> </span><span id="L-52"><a name="L-52"></a><span class="s1">.g-podLast { </span> </span><span id="L-53"><a name="L-53"></a><span class="s1"> float: none; </span> </span><span id="L-54"><a name="L-54"></a><span class="s1"> width: auto; </span> </span><span id="L-55"><a name="L-55"></a><span class="s1"> // IE Hacks. Shh... Don&#39;</span><span class="n">t</span> <span class="n">tell</span><span class="o">.</span> </span><span id="L-56"><a name="L-56"></a> <span class="n">_position</span><span class="o">:</span> <span class="nb">relative</span><span class="p">;</span> </span><span id="L-57"><a name="L-57"></a> <span class="n">_left</span><span class="o">:</span> <span class="m">-3px</span><span class="p">;</span> </span><span id="L-58"><a name="L-58"></a> <span class="n">_margin</span><span class="o">-</span><span class="nb">right</span><span class="o">:</span> <span class="m">-3px</span><span class="p">;</span> </span><span id="L-59"><a name="L-59"></a><span class="p">}</span> </span><span id="L-60"><a name="L-60"></a> </span><span id="L-61"><a name="L-61"></a><span class="c">/* Smartphone Adjustments (portrait and landscape) ----------- */</span> </span><span id="L-62"><a name="L-62"></a><span class="k">@media</span> <span class="nt">only</span> <span class="nt">screen</span> </span><span id="L-63"><a name="L-63"></a><span class="nt">and</span> <span class="o">(</span><span class="nt">min-device-width</span> <span class="o">:</span> <span class="nt">320px</span><span class="o">)</span> </span><span id="L-64"><a name="L-64"></a><span class="nt">and</span> <span class="o">(</span><span class="nt">max-device-width</span> <span class="o">:</span> <span class="nt">480px</span><span class="o">)</span> <span class="p">{</span> </span><span id="L-65"><a name="L-65"></a> <span class="c">/* Styles */</span> </span><span id="L-66"><a name="L-66"></a> <span class="nc">.g-pod</span><span class="p">{</span> </span><span id="L-67"><a name="L-67"></a> <span class="nb">float</span><span class="o">:</span> <span class="nb">none</span> <span class="cp">!important</span><span class="p">;</span> </span><span id="L-68"><a name="L-68"></a> <span class="nb">width</span><span class="o">:</span> <span class="nb">auto</span> <span class="cp">!important</span><span class="p">;</span> </span><span id="L-69"><a name="L-69"></a> <span class="p">}</span> </span><span id="L-70"><a name="L-70"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
css, grid, oocss