Tiny Responsive CSS Grid Layout System – Atomic Grid

Atomic Grid is a lightweight, responsive grid layout system based on CSS Grid Layout.

Supports 12-column, 20-column, and 24-column grid systems.

How to use it:

Import the atomic-grid.min.css into the document.

<link rel="stylesheet" href="atomic-grid.min.css">

Create a basic grid system.

<!-- 12 Columns -->
<div class="g-12">
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>
<!-- 20 Columns -->
<div class="g-20">
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>
<!-- 24 Columns -->
<div class="g-24">
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>

Add Offsets.

<div class="gs12 g-12">
  <div class="go2">column 3</div>
  <div class="go5">column 6</div>
  <div class="go8">column 9</div>
  <div class="go11">column 12</div>
</div>

Span multiple columns.

<div class="g-12">
  <div class="gs4">rule</div>
  <div class="gs4">of </div>
  <div class="gs4">thirds</div>
</div>

Nesting is supported as well.

<div class="g-12">
  <div class="g-12 gs4 go4">
    <div class="gs4">column</div>
    <div class="gs4">column</div>
    <div class="gs4">column</div>
  </div>
</div>

Make the grid system fully responsive with the following classes.

• -m: medium size
• -l: large size
• -ns: not small

<div class="g-12 debug-black">
  <div class="gs6 gs3-m gs2-l">column</div>
  <div class="gs6 gs3-m gs2-l">column</div>
  <div class="gs6 gs3-m gs2-l">column</div>
  <div class="gs6 gs3-m gs2-l">column</div>
  <div class="gs6 gs3-m gs2-l">column</div>
  <div class="gs6 gs3-m gs2-l">column</div>
  <div class="gs6 gs3-m gs2-l">column</div>
  <div class="gs6 gs3-m gs2-l">column</div>
  <div class="gs6 gs3-m gs2-l">column</div>
  <div class="gs6 gs3-m gs2-l">column</div>
  <div class="gs6 gs3-m gs2-l">column</div>
  <div class="gs6 gs3-m gs2-l">column</div>
</div>