dot-grid

A modern, flexible 12-column CSS Grid system with container queries, fluid layouts, and subgrid support.

✨ Features

- Modern CSS Grid - Built on native CSS Grid (not flexbox or floats)
- Container Queries - Responsive classes based on container size, not viewport
- Fluid Layouts - Auto-responsive utilities that adapt without breakpoints
- Subgrid Support - Perfect alignment for nested grids
- CSS Custom Properties - Easy customization via CSS variables
- Cascade Layers - Better specificity control
- Logical Properties - Automatic RTL support
- Zero JavaScript - Pure CSS solution
- 28KB / 19KB minified - Lightweight and performant

📦 Installation

$3

``bash
npm install @lobergdesign/dot-grid
`

Then import in your CSS/SCSS:

`css
@import '@lobergdesign/dot-grid';
`

Or in your HTML:

`html
rel="stylesheet"
href="node_modules/@lobergdesign/dot-grid/dist/grid.min.css"
/>
`

$3

`html
rel="stylesheet"
href="https://unpkg.com/@lobergdesign/dot-grid@latest/dist/grid.min.css"
/>
`

🚀 Quick Start

$3

`html


`html


- .grid-w - Centers content with max-width and responsive padding

#### Grid Container

- .grid-r - Creates a 12-column grid container with container query support

$3

#### Basic Columns

`html


All classes from .grid-c-1 through .grid-c-12 are available.

#### Container Query Responsive (Modern, Recommended)

Responds to the container width, not viewport:

`html


- sm: 640px
- md: 768px
- lg: 1024px
- xl: 1280px
- xxl: 1536px

#### Viewport-based Responsive (Alternative)

If you need viewport-based responsive behavior instead:

`html


`html


`html


`html



`html


`html


`html




`

#### RAM Pattern (Repeat Auto Minmax)

`html


- .grid-r-intrinsic - Columns size based on content
- .grid-r-even - Even columns sharing space equally
- .grid-r-dense - Fills gaps in the grid (masonry style)

$3

Align content within a column:

`html



Vertical options: t (top), c (center), b (bottom)
Horizontal options: l (left), c (center), r (right)

$3

For flex-based alignment within columns:

`html


Available: .justify-start, .justify-end, .justify-center, .justify-between, .justify-around, .justify-evenly

$3

`html



`html


`css
:root {
/ Change default gap /
--grid-gap: 1.5rem;

/ Change column count (affects all calculations) /
--grid-columns: 16;

/ Change container max width /
--grid-w-max-width: 1400px;
--grid-w-width: 95vw;

/ Customize fluid layouts /
--grid-auto-min: 300px; / For grid-auto-fit /
--grid-c-min-width: 250px; / For grid-c-fluid /
}
`

$3

For advanced customization, import the SCSS source:

`scss
// Override variables before import
$grid-columns: 16;
$grid-gap-default: 2rem;
$breakpoints: (
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1600px,
);

@use '@lobergdesign/dot-grid/src/grid';
`

🌐 Browser Support

- Container Queries: Chrome 105+, Safari 16+, Firefox 110+ (Feb 2023+)
- Subgrid: Chrome 117+, Safari 16+, Firefox 71+ (2023+)
- CSS Grid: All modern browsers (2017+)
- Cascade Layers: Chrome 99+, Safari 15.4+, Firefox 97+ (2022+)

For older browsers, the basic grid system will still work. Container queries will fall back to mobile-first behavior.

📝 Examples

See the /examples directory for complete working examples:

- basic.html - Core grid features
- container-queries.html - Container query responsive layouts
- fluid-layout.html - Auto-responsive fluid grids
- subgrid.html` - Subgrid alignment examples

$3

- Subgrid support
- Fluid layout utilities
- More gap utilities
- Aspect ratio utilities
- Display utilities
- CSS custom properties

📄 License

MIT © Jean Loberg