simple-grid

• Always wrap your entire page with a container (unless you have a background image that you want to bleed to the edges of the page at all times)
• Wrap each set of elements in a row
• Don't change the width, padding-left, padding-right, margin-left or margin-right of the items that have a [size]-col-[x] class on them.

Reminder

A 12-column system works like this:

Example usage:

  <main class="container">
      <section class="row">

        <div class="col-12 md-col-6 lg-col-3">
          <div class="item">
            <!-- content goes here -->
          </div>
        </div>

        <div class="col-12 md-col-6 lg-col-3">
          <div class="item">
            <!-- content goes here -->
          </div>
        </div>

        <div class="col-12 md-col-6 lg-col-3">
          <div class="item">
            <!-- content goes here -->
          </div>
        </div>

        <div class="col-12 md-col-6 lg-col-3">
          <div class="item">
            <!-- content goes here -->
          </div>
        </div>

      </section>
    </main>