/simple-css-grid

a super simple css grid system in <100 LOC

Primary LanguageCSS

Based on this blogpost: http://j4n.co/blog/Creating-your-own-css-grid-system

Basic usage:

<div class="grid-container">
    <div class="row">
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
    </div> 
    <div class="row">
        <div class="col-2"><p>col-2</p></div> 
        <div class="col-2"><p>col-2</p></div> 
        <div class="col-2"><p>col-2</p></div> 
    </div> 
    <div class="row">
        <div class="col-3"><p>col-3</p></div> 
        <div class="col-3"><p>col-3</p></div> 
    </div> 
    <div class="row">
        <div class="col-4"><p>col-4</p></div> 
        <div class="col-2"><p>col-2</p></div> 
    </div> 
    <div class="row">
        <div class="col-5"><p>col-5</p></div> 
        <div class="col-1"><p>col-1</p></div> 
    </div> 
    <div class="row">
        <div class="col-6"><p>col-6</p></div> 
    </div> 
</div>