cssgrid

cssgrid allows you to quickly develop responsive layouts using CSS3 Grid Layout module.

Inspired by grid implementations used by Bootstrap and Foundation.

Installing cssgrid

Download

• cssgrid.min.css minified, or
• cssgrid.css unminified.

CDN

Link directly to cssgrid files on unpkg.

<link rel="stylesheet" type="text/css" href="https://unpkg.com/@bordertech/cssgrid/dist/cssgrid.min.css">
<!-- or -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@bordertech/cssgrid/dist/cssgrid.css">

Package managers

Install with npm: npm install @bordertech/cssgrid

Install with yarn: yarn install @bordertech/cssgrid

Getting started

Basic Grid

Create a container and add the class cg-grid which provides a grid with the default 12 columns.

<div class="cg-grid">
...
</div>

The direct children of the container are used as the items in the grid.

<div class="cg-grid">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

The width of each column can be determined by adding one of the following classes:-

• cg-col-1
• cg-col-2
• cg-col-3
• ......
• cg-col-11
• cg-col-12

Each class is named after how many columns you want out of 12. So if you want 4 columns out of 12, use cg-col-4.

Here is an example of a grid with 3 equal columns.

html

<div class="cg-grid">
  <div class="cg-col-4">...</div>
  <div class="cg-col-4">...</div>
  <div class="cg-col-4">...</div>
</div>

rendered

Responsive classes

Cssgrid is mobile-first. Remember to code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.

There are five levels of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

The breakpoints are based on minimum widths, meaning they apply to that one size and all those above it (e.g., .col-sm-6 applies to small, medium, large, and extra large devices).

Mobile First (ie all breakpoints)

For grids that are the same from the smallest of devices to the largest, use the .cg-col-* classes. Specify a numbered class when you need a particularly sized column.

html

<div class="cg-grid">
  <div class="cg-col-5">...</div>
  <div class="cg-col-7">...</div>
</div>

rendered

Stacked to horizontal

Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices.

html

<div class="cg-grid">
  <div class="cg-col-md-4">...</div>
  <div class="cg-col-md-4">...</div>
  <div class="cg-col-md-4">...</div>
</div>

rendered

Mix and match

Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

html

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="cg-grid">
  <div class="cg-col-md-8">...</div>
  <div class="cg-col-6 cg-col-md-4">...</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="cg-grid">
  <div class="cg-col-6 cg-col-lg-4">...</div>
  <div class="cg-col-6 cg-col-lg-4">...</div>
  <div class="cg-col-6 cg-col-lg-4">...</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="cg-grid">
  <div class="cg-col-6">...</div>
  <div class="cg-col-6">...</div>
</div>

rendered

Add these column sizes to respond to the 5 levels of breakpoints:

• xs: cg-col-*
• sm: cg-col-sm-*
• md: cg-col-md-*
• lg: cg-col-lg-*
• xl: cg-col-xl-*

View more examples here.