/grid

A Responsive CSS Grid

Primary LanguageHTML

A Responsive CSS Grid v1.0

Another responsive CSS grid with flexible, nestable columns

  • flexible, nestable columns columns
  • fractional class names .one-third, .two-thirds etc
  • .push-* classes for whitespace
  • extendable, add your own classes for a feature rich grid
  • uses box-sizing: border-box
  • uses padding for gutters
  • no .first or .last classes
  • .flow-reverse class to change order of content on larger/small devices

Install with Bower

$ bower install --save jjgrainger-grid

Basic usage

<div class="row">
    <div class="column one-whole">
        ...
    </div>
</div>

Nested Columns

<div class="row">
    <div class="column one-third">
        ...
    </div>
    <div class="column two-thirds">
        <div class="row">
            <div class="column one-half">...</div>
            <div class="column one-half">...</div>
            <div class="column one-half">...</div>
            <div class="column one-half">...</div>
        </div>
    </div>
</div>

Flow reverse

You can use flow reverse to display content first on mobile but appear on the right on larger screens

<div class="row">
    <div class="column one-third flow-reverse">
        ...
    </div>
    <div class="column two-thirds">
        ...
    </div>
</div>

Author

Joe Grainger