My Simple Grid

A lightweight, responsive CSS grid

Based by Zach Cole development

bower, yarn, npm

    bower install my-simplegrid

    yarn add my-simplegrid
    # or
    # npm i my-simplegrid

My Simple Grid and Simple Code

My Simple Grid is a mobile-first 12-column CSS grid system to make developing responsive websites easy and fast.

All the code you need is simple and familiar. A parent container class contains the grid. Within the container are rows. Row classes denote rows of content, which can be filled with up to 12 columns. Columns must be nested within a row.

To define your column width, declare how many columns you want your content to take up on desktop and large screens. For example, if your content should take up 6 out of 12 columns (or half the container), your class name will be .col-6.

If you don’t want columns to expand on mobile devices and small screens, simply add -sm to the end of your column class name. For example, if you want to have two blocks of content floating side-by-side on small screens, each would be given the class name .col-6-sm.

<!-- example -->
<link rel="stylesheet" href="dist/my-simple-grid.min.css" />

    <!-- code example -->
    <div class="container">
      <div class="row">
        <div class="col-3">
          <!-- This content will take up 3/12 (or 1/4) of the container -->
        </div>
        <div class="col-3">
          <!-- This content will take up 3/12 (or 1/4) of the container -->
        </div>
        <div class="col-6">
          <!-- This content will take up 6/12 (or 1/2) of the container -->
        </div>
      </div>
    </div>

License

Open source under the MIT License.