Gridy☺

Docs

01. Project Structure

Recommended folder structure for a clean Gridy setup. 

    /assets
      /img
      /js
      /css
        style.css

02. Grid Variables

In style.css, define grid variables first to customize the system. Without this, Gridy uses default values. 

    :root{
      --pl:32px;
      --pr:32px;
      --gp:32px;
      --mw:960px;
    }

These control:
• --pl / --pr → page padding left/right
• --gp → grid gap
• --mw → max width container

03. Grid Overlay

Press Shift + G to toggle grid overlay. Use it to align elements and debug spacing.

04. Grid Columns

Gridy uses a 12-column system. Examples are ordered from 1 column up to full width.

Layout structure is composed of three layers:
.con sets the main container width and page padding,
.grd defines the 12-column grid system,
and .c-* controls how many columns each element occupies.

1 Column (12 × 1)
2 Columns (6 + 6)
3 Columns (4 + 4 + 4)
4 Columns (3 + 3 + 3 + 3)
6 Columns (2 × 6)
Full Width (12)

05. Column Start

Use s-* classes to offset elements horizontally.

.c-4 .s-2
.c-3 .s-6
.c-2 .s-11

06. Flex Utilities

Use flex helper classes for alignment and distribution.

.f-r .j-b .a-c
left
center
right
.f-c .f-c
item
item
item
.f-c .j-c .a-c
center

07. Text Align

Utility classes for horizontal text alignment.

.t-l
left aligned text
.t-c
centered text
.t-r
right aligned text

08. Spacing

Margin and padding utilities follow the baseline rhythm. Spacing classes use consistent vertical increments for layout balance.

Margin Top

.mt-8
.mt-16
.mt-32
.mt-44
.mt-64

Margin Bottom

.mb-8
.mb-16
.mb-32
.mb-44
.mb-64

Padding Top

.pt-8
content
.pt-16
content
.pt-32
content
.pt-44
content
.pt-64
content

Padding Bottom

.pb-8
content
.pb-16
content
.pb-32
content
.pb-44
content
.pb-64
content

09. Image System

Fixed-height image utilities for fast layout composition. Combine .img with height utilities to create consistent image blocks.

.img .img-80
.img .img-160
.img .img-192
.img .img-240
.img .img-320
.img .img-480
.img .img-560
.img .img-640
.img-fit

10. Responsive System

Below 900px Gridy switches automatically to 4 columns. All column classes become full width.

desktop: .c-3
desktop: .c-3
desktop: .c-3
desktop: .c-3