Simple

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

Lightweight

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

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, 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-12

Nested Grids

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