Tiny Responsive CSS Grid Layout System – Atomic Grid

Category: CSS & CSS3 , Layout | June 15, 2019
Author: leetheguy
Views Total: 225
Official Page: Go to website
Last Update: June 15, 2019
License: MIT

Preview:

Tiny Responsive CSS Grid Layout System – Atomic Grid

Description:

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>

You Might Be Interested In:


Leave a Reply