/grid

A simple grid

Primary LanguageHTML

Grid

Grid is a is an aide to introduce the basics of responsive grid design with CSS.

Example

<div class='col-1'></div>    // A div that spans the whole viewport

<div class='col-2'></div>    // A div that spans half viewport

<div class='col-2'>          //  A div that spans half viewport with 
  <div class='col-2'></div>  //  two divs within
  <div class='col-2'></div>
</div>

Motivation

Grid was created for a 5 minute lighting talk at MakerSquare. The goals were to teach the basics of box-sizing, media queries, and responsive design.

Installation

Clone the repo and open index.html in the browswer to see the example.