GRID

Swavy UI grid splitting webpages into columns of equivalent widths

GRID

                    
<div class="sw_grid-row">
    <div class="sw_grid sw_grid-100">
        <input type="text" class="sw_form-input" placeholder="Swift Full Column" disabled="disabled" />
    </div>
</div>

<div class="sw_grid-row sw_mt-1">
    <div class="sw_grid sw_grid-90">
        <input type="text" class="sw_form-input" placeholder="Swift 9/10 Column" disabled="disabled" />
    </div>
</div>

<div class="sw_grid-row sw_mt-1">
    <div class="sw_grid sw_grid-80">
        <input type="text" class="sw_form-input" placeholder="Swift 8/10 Column" disabled="disabled" />
    </div>
</div>

<div class="sw_grid-row sw_mt-1">
    <div class="sw_grid sw_grid-70">
        <input type="text" class="sw_form-input" placeholder="Swift 7/10 Column" disabled="disabled" />
    </div>
</div>

<div class="sw_grid-row sw_mt-1">
    <div class="sw_grid sw_grid-60">
        <input type="text" class="sw_form-input" placeholder="Swift 6/10 Column" disabled="disabled" />
    </div>
</div>

                

GRID COLUMNS

                    
<div class="sw_grid-row">
    <div class="sw_grid sw_grid-half">
        <input type="text" class="sw_form-input" placeholder="Swift 1/2 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-half">
        <input type="text" class="sw_form-input" placeholder="Swift 1/2 Column" disabled="disabled" />
    </div>
</div>

                

GRID COLUMNS

                    
<div class="sw_grid-row">
    <div class="sw_grid sw_grid-third">
        <input type="text" class="sw_form-input" placeholder="Swift 1/3 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-third">
        <input type="text" class="sw_form-input" placeholder="Swift 1/3 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-third">
        <input type="text" class="sw_form-input" placeholder="Swift 1/3 Column" disabled="disabled" />
    </div>
</div>

<div class="sw_grid-row">
    <div class="sw_grid sw_grid-66">
        <input type="text" class="sw_form-input" placeholder="Swift 2/3 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-third">
        <input type="text" class="sw_form-input" placeholder="Swift 1/3 Column" disabled="disabled" />
    </div>
</div>

                

GRID COLUMNS

                    
<div class="sw_grid-row">
    <div class="sw_grid sw_grid-quarter">
        <input type="text" class="sw_form-input" placeholder="Swift 1/4 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-quarter">
        <input type="text" class="sw_form-input" placeholder="Swift 1/4 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-quarter">
        <input type="text" class="sw_form-input" placeholder="Swift 1/4 Column" disabled="disabled" />
    </div>
     <div class="sw_grid sw_grid-quarter">
        <input type="text" class="sw_form-input" placeholder="Swift 1/4 Column" disabled="disabled" />
    </div>
</div>

<div class="sw_grid-row">
    <div class="sw_grid sw_grid-75">
        <input type="text" class="sw_form-input" placeholder="Swift 3/4 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-quarter">
        <input type="text" class="sw_form-input" placeholder="Swift 1/4 Column" disabled="disabled" />
    </div>
</div>

                

GRID COLUMNS

                    
<div class="sw_grid-row">
    <div class="sw_grid sw_grid-20">
        <input type="text" class="sw_form-input" placeholder="Swift 1/5 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-20">
        <input type="text" class="sw_form-input" placeholder="Swift 1/5 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-20">
        <input type="text" class="sw_form-input" placeholder="Swift 1/5 Column" disabled="disabled" />
    </div>
     <div class="sw_grid sw_grid-20">
        <input type="text" class="sw_form-input" placeholder="Swift 1/5 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-20">
        <input type="text" class="sw_form-input" placeholder="Swift 1/5 Column" disabled="disabled" />
    </div>
</div>

<div class="sw_grid-row">
    <div class="sw_grid sw_grid-60">
        <input type="text" class="sw_form-input" placeholder="Swift 3/5 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-40">
        <input type="text" class="sw_form-input" placeholder="Swift 2/5 Column" disabled="disabled" />
    </div>
</div>

<div class="sw_grid-row">
    <div class="sw_grid sw_grid-80">
        <input type="text" class="sw_form-input" placeholder="Swift 4/5 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-20">
        <input type="text" class="sw_form-input" placeholder="Swift 1/5 Column" disabled="disabled" />
    </div>
</div>

                

GRID COLUMNS

                    
<div class="sw_grid-row">
    <div class="sw_grid sw_grid-17">
        <input type="text" class="sw_form-input" placeholder="Swift 1/6 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-17">
        <input type="text" class="sw_form-input" placeholder="Swift 1/6 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-17">
        <input type="text" class="sw_form-input" placeholder="Swift 1/6 Column" disabled="disabled" />
    </div>
     <div class="sw_grid sw_grid-17">
        <input type="text" class="sw_form-input" placeholder="Swift 1/6 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-17">
        <input type="text" class="sw_form-input" placeholder="Swift 1/6 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-17">
        <input type="text" class="sw_form-input" placeholder="Swift 1/6 Column" disabled="disabled" />
    </div>
</div>


<div class="sw_grid-row">
    <div class="sw_grid sw_grid-83">
        <input type="text" class="sw_form-input" placeholder="Swift 5/6 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-17">
        <input type="text" class="sw_form-input" placeholder="Swift 1/6 Column" disabled="disabled" />
    </div>
</div>

                

GRID COLUMNS

                    
<div class="sw_grid-row">
    <div class="sw_grid sw_grid-13">
        <input type="text" class="sw_form-input" placeholder="Swift 1/8 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-13">
        <input type="text" class="sw_form-input" placeholder="Swift 1/8 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-13">
        <input type="text" class="sw_form-input" placeholder="Swift 1/8 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-13">
        <input type="text" class="sw_form-input" placeholder="Swift 1/8 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-13">
        <input type="text" class="sw_form-input" placeholder="Swift 1/8 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-13">
        <input type="text" class="sw_form-input" placeholder="Swift 1/8 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-13">
        <input type="text" class="sw_form-input" placeholder="Swift 1/8 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-13">
        <input type="text" class="sw_form-input" placeholder="Swift 1/8 Column" disabled="disabled" />
    </div>
</div>


<div class="sw_grid-row">
    <div class="sw_grid sw_grid-87">
        <input type="text" class="sw_form-input" placeholder="Swift 7/8 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-13">
        <input type="text" class="sw_form-input" placeholder="Swift 1/8 Column" disabled="disabled" />
    </div>
</div>

                

GRID COLUMNS

                    
<div class="sw_grid-row">
    <div class="sw_grid sw_grid-10">
        <input type="text" class="sw_form-input" placeholder="Swift 1/10 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-10">
        <input type="text" class="sw_form-input" placeholder="Swift 1/10 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-10">
        <input type="text" class="sw_form-input" placeholder="Swift 1/10 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-10">
        <input type="text" class="sw_form-input" placeholder="Swift 1/10 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-10">
        <input type="text" class="sw_form-input" placeholder="Swift 1/10 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-10">
        <input type="text" class="sw_form-input" placeholder="Swift 1/10 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-10">
        <input type="text" class="sw_form-input" placeholder="Swift 1/10 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-10">
        <input type="text" class="sw_form-input" placeholder="Swift 1/10 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-10">
        <input type="text" class="sw_form-input" placeholder="Swift 1/10 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-10">
        <input type="text" class="sw_form-input" placeholder="Swift 1/10 Column" disabled="disabled" />
    </div>
</div>


<div class="sw_grid-row">
    <div class="sw_grid sw_grid-70">
        <input type="text" class="sw_form-input" placeholder="Swift 7/10 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-30">
        <input type="text" class="sw_form-input" placeholder="Swift 3/10 Column" disabled="disabled" />
    </div>
</div>


<div class="sw_grid-row">
    <div class="sw_grid sw_grid-90">
        <input type="text" class="sw_form-input" placeholder="Swift 9/10 Column" disabled="disabled" />
    </div>
    <div class="sw_grid sw_grid-10">
        <input type="text" class="sw_form-input" placeholder="Swift 1/10 Column" disabled="disabled" />
    </div>
</div>