Simple Grid+

Simple Grid+ provides you with a lightweight and responsive CSS grid & utility components for easier front-end development. It also includes some utilities for controlling placement of items.

• Tiny in size (less than 5KB uncompressed).
• Easy to use.
• lightweight, widely compatible.
• Supports nesting.
• Bootstrap-like in syntax.
• Responsive via various size breakpoints.
• Permissive licensing (MIT).

Creating a Grid

Simple Grid+ uses a 12-column CSS grid that's easy to use. Simply create a container, add a row, and create all of your columns!

      
        <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>
      

The above code will produce a grid like so:

Grid Nesting

Simple Grid+ fully supports nesting grids within other grids and will do so with no issues.

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

The above code will produce nested grids like this:

Automatically Sized Columns

Starting with simple Grid+ version 2.0.0 you can now create columns that will automatically resize depending on the available space by using the col class instead of a numbered class.

        <div class="grid-example">
          <div class="row">
            <div class="col">
              <!-- This content will take up all of the space not taken up. In this case, 3/4th of the entire row -->
            </div>
            <div class="col-3">
              <!-- This content will take up 3/12 (or 1/4) of the container -->
            </div>
          </div>
        </div>
      

This code will result in a grid like this:

Breakpoints

• sm: 33.75em (540px)
• md: 45em (720px)
• lg: 60em (960px)
• xlg: 75em (1200px)

Utility

Simple Grid+ provides placement classes much like bootstrap. These include margin, padding, and gap. Examples: gap-3, m-2, p-3, mr-2.

Migration from Simple Grid

If you are looking to migrate from the original Simple Grid project you have a few option:

1. Use the v1 release of Simple Grid+
2. Perform a migration to the v2 release of Simple Grid+

Option 1

Option 1 is simplest upgrade path. Simply download the version 1.0.0 release and update your existing code to use the new CSS. If you previously were using the typography you should also add in the now seperate typography CSS file.

Option 2

To migrate to the current version of Simple Grid+, there are a few changes to note between it and the last release of Simple Grid

• The breakpoints have been refactored. They now behave like Bootstrap. (col-3-sm will be displayed on a device with a small or larger screen. col-3-xlg will display on an extra large screen or larger)
• Grids and columns no longer have padding or margin applied to them. You should add spacing to your content instead.
• The existing utility classes have been removed.
• Simple Grid+ uses Display: flex;.
• Rows will now always use 100% of the width available in their parent.