Web Grid

Grid CSS based Grid Framework!

A grid CSS based grid system for easy web development.

The minified Web Grid CSS weighs less than a KB.

CSS Grid is simple

Simple

Web Grid makes use of Grid CSS which is simple and easy to use.

CSS Grid is Light

Lightweight

Web Grid uses no floats and flex, making it one of the lightest CSS Frameworks.

CSS Grid is Responsive

Responsive

Web Grid adopts its size according to the device it is viewed on.

Usage

    <div class="r">
      
       <div class="c-4">
              <p class="item">Spans over 4 fractions of the available width.</p>
       </div>
       
       <div class="c-8">
              <p class="item">Spans over 8 fractions of the available width.</p>
       </div>
       
    </div>

Spans over 4 fractions of the available width.

Spans over 8 fractions of the available width.

Currently, not many browsers support Grid CSS. Use this polyfill(a JS file) for support on all browsers.

Sample Grids

c-1
c-11
c-2
c-10
c-3
c-9
c-4
c-8
c-5
c-7
c-6
c-6
c-12

Nested Grids

c-6
c-6
c-6
c-4
c-8

Usage

    <div class="r">
    
     <div class="c-6">
        <div class="item">Spans over 6 fractions of the available width.</div>
     </div>
     
     <div class="c-6">
       
        <div class="item">
           <div class="r">
             
              <div class="c-6">
                 <div class="item">6 fractions</div>
              </div>
              
              <div class="c-6">
                 <div class="item">6 fractions</div>
              </div>
              
              <div class="c-4">
                 <div class="item">4 fractions</div>
              </div>
              
              <div class="c-8">
                 <div class="item">8 fractions</div>
              </div>
              
           </div>
        </div>
     </div>
     
    </div>

Multiple Column Sizes

c-3 c-50
c-9 c-50
c-2 c-25
c-10 c-75
c-10 c-100
c-2 c-100
c-25
c-75

Usage

    <div class="r">
    
       <div class="r">
       
        <div class="c-3 c-50">
           
            <div class="item">3 fractions, 50%(medium screen sizes)</div>
        </div>
        
        <div class="c-9 c-50">
            <div class="item">9 fractions, 50%(medium screen sizes)</div>
        </div>
        
    </div>
    <div class="r">
       
        <div class="c-2 c-25">
            <div class="item">2 fractions, 25%(medium screen sizes)</div>
        </div>
        
        <div class="c-10 c-75">
            <div class="item">10 fractions, 75%(medium screen sizes)</div>
        </div>
        
    </div>

    <div class="r">
       
        <div class="c-25">
            <div class="item">25%(medium screen sizes & Desktop)</div>
        </div>
        
        <div class="c-75">
            <div class="item">75%(medium screen sizes & Desktop)</div>
        </div>
        
    </div>
    
    </div>
Use c-25, c-50, c-75 and c-100 for resizing columns into 25%, 50%, 75% and 100% for medium screen sizes.

Start Using the Future of Web Development