mastors-gridder 1.0.0 → 1.2.0

package/README.MD

@@ -18,19 +18,21 @@ A powerful, flexible, and production-ready SASS grid utility library that provid
 
 ---
 
-
 ## 📋 Table of Contents
 
 - [Installation](#-installation)
+- [What's New in v1.2](#-whats-new-in-v12)
 - [Quick Start](#-quick-start)
 - [Grid Mixins Overview](#-grid-mixins-overview)
 - [Quick Reference Table](#-quick-reference-table)
 - [Detailed Documentation](#-detailed-documentation)
+  - [Core Grid Mixins](#core-grid-mixins)
   - [Responsive Grid Mixins](#responsive-grid-mixins)
   - [Fixed Grid Mixins](#fixed-grid-mixins)
   - [Layout Pattern Mixins](#layout-pattern-mixins)
   - [Grid Item Mixins](#grid-item-mixins)
   - [Alignment & Utility Mixins](#alignment--utility-mixins)
+  - [Advanced Grid Mixins (NEW)](#advanced-grid-mixins-new)
 - [Usage Examples](#-usage-examples)
 - [Best Practices](#-best-practices)
 - [Browser Support](#-browser-support)
@@ -63,13 +65,13 @@ npm i mastors-gridder
 Then import in your SCSS file:
 
 ```scss
-@use "mastors-gridder" as *;
+@use "mastors-gridder/mastors-gridder" as *;
 ```
 
 Or with a custom namespace:
 
 ```scss
-@use "mastors-gridder" as grid;
+@use "mastors-gridder/mastors-gridder" as grid;
 
 // Usage: @include grid.grid-auto(250px, 1rem);
 ```
@@ -84,6 +86,52 @@ Download `_mastors-gridder.scss` and import it:
 
 ---
 
+## 🎉 What's New in v1.2
+
+Version 1.2 brings **20 powerful new mixins** and significant enhancements to the library, expanding from 23 to **43 comprehensive grid mixins**!
+
+### ✨ New Features
+
+#### 🔧 Core Grid Setup
+- **`grid-container`** - Simplified grid container initialization
+- **`grid-auto-flow`** - Control auto-placement with dense packing
+- **`grid-auto-rows`** - Set automatic row sizing
+- **`grid-auto-cols`** - Set automatic column sizing
+
+#### 📐 Advanced Sizing
+- **`grid-minmax`** - Explicit minmax control with auto-fit/fill
+- **`grid-fr`** - Create grids with explicit fr unit ratios
+- **`grid-intrinsic`** - Use intrinsic sizing (min/max/fit-content)
+- **`grid-explicit`** - Set columns and rows in one mixin
+- **`grid-fit-content`** - Flexible column sizing with fit-content()
+- **`grid-repeat-pattern`** - Repeat custom patterns
+- **`grid-auto-track`** - Flexible auto-fit/fill with custom min/max
+
+#### 🎯 Positioning & Layout
+- **`grid-layer`** - Overlay elements across grid tracks
+- **`grid-full-width`** - Span all columns instantly
+- **`grid-full-height`** - Span all rows instantly
+- **`grid-place`** - Concise shorthand for place-items
+- **`grid-place-content`** - Shorthand for place-content
+
+#### 📱 Responsive Enhancements
+- **`grid-areas-responsive`** - Responsive grid template areas
+- **`grid-container-aware`** - Container query support
+- **`grid-masonry-modern`** - Improved masonry with dense packing
+
+#### 🎨 Content Alignment
+- **`grid-content`** - Align entire grid content (not items)
+
+### 🚀 Key Improvements
+
+- **43 Total Mixins** - Nearly doubled the mixin library
+- **Better Performance** - Optimized output with modern CSS features
+- **Enhanced Flexibility** - More granular control over grid behavior
+- **Modern CSS Support** - Container queries, intrinsic sizing, and more
+- **Improved Documentation** - Comprehensive examples for all mixins
+
+---
+
 ## ⚡ Quick Start
 
 ```scss
@@ -92,14 +140,24 @@ Download `_mastors-gridder.scss` and import it:
   @include grid-auto(300px, 2rem);
 }
 
+// NEW: Simple container setup
+.wrapper {
+  @include grid-container(12, 1rem);
+}
+
+// NEW: Explicit minmax control
+.cards {
+  @include grid-minmax(200px, 400px, auto-fit, 1rem);
+}
+
 // Fixed 4-column grid
 .dashboard {
   @include grid-cols(4, 1.5rem);
 }
 
-// Sidebar layout
-.layout {
-  @include grid-sidebar(250px, 2rem);
+// NEW: Full-width spanning
+.hero-image {
+  @include grid-full-width;
 }
 
 // Centered content
@@ -108,9 +166,9 @@ Download `_mastors-gridder.scss` and import it:
   min-height: 400px;
 }
 
-// Span multiple columns
-.featured {
-  @include grid-span(2, 1);
+// NEW: Modern masonry
+.masonry {
+  @include grid-masonry-modern(4, 40px, 1rem);
 }
 ```
 
@@ -118,20 +176,57 @@ Download `_mastors-gridder.scss` and import it:
 
 ## 🎯 Grid Mixins Overview
 
-| Category       | Mixins                                               | Use Case               |
-| -------------- | ---------------------------------------------------- | ---------------------- |
-| **Responsive** | `grid-auto`, `grid-fill`, `grid-cards`               | Auto-responsive grids  |
-| **Fixed**      | `grid-cols`, `grid-rows`, `grid-template`            | Fixed column/row grids |
-| **Layouts**    | `grid-sidebar`, `grid-holy-grail`, `grid-full-bleed` | Common layout patterns |
-| **Items**      | `grid-span`, `grid-area`, `grid-order`               | Grid item positioning  |
-| **Alignment**  | `grid-center`, `grid-align`, `grid-self`             | Content alignment      |
-| **Utilities**  | `grid-gap`, `grid-dense`, `grid-subgrid`             | Special functionality  |
+| Category           | Count | Mixins                                                                                |
+| ------------------ | ----- | ------------------------------------------------------------------------------------- |
+| **Core Setup**     | 4     | `grid-container`, `grid-auto-flow`, `grid-auto-rows`, `grid-auto-cols`                |
+| **Responsive**     | 5     | `grid-auto`, `grid-fill`, `grid-cards`, `grid-dense`, `grid-stacked`                  |
+| **Fixed**          | 4     | `grid-cols`, `grid-rows`, `grid-template`, `grid-equal-rows`                          |
+| **Layouts**        | 6     | `grid-sidebar`, `grid-sidebar-responsive`, `grid-holy-grail`, `grid-full-bleed`, etc. |
+| **Items**          | 3     | `grid-span`, `grid-area`, `grid-order`                                                |
+| **Alignment**      | 5     | `grid-center`, `grid-align`, `grid-self`, `grid-place`, `grid-place-content`          |
+| **Advanced**       | 11    | `grid-minmax`, `grid-fr`, `grid-intrinsic`, `grid-layer`, `grid-areas-responsive`     |
+| **Utilities**      | 5     | `grid-gap`, `grid-subgrid`, `grid-full-width`, `grid-full-height`, etc.               |
+
+**Total: 43 Mixins** 🎉
 
 ---
 
 ## 📊 Quick Reference Table
 
-Complete list of all mixins with parameters, defaults, and usage examples.
+### NEW: Core Grid Mixins
+
+| Mixin              | Parameters                  | Defaults          | Usage Example                               |
+| ------------------ | --------------------------- | ----------------- | ------------------------------------------- |
+| `grid-container`   | `$cols`, `$gap`             | `12`, `1rem`      | `@include grid-container(12, 1rem);`        |
+| `grid-auto-flow`   | `$flow`, `$dense`           | `row`, `false`    | `@include grid-auto-flow(column, true);`    |
+| `grid-auto-rows`   | `$size`                     | `auto`            | `@include grid-auto-rows(100px);`           |
+| `grid-auto-cols`   | `$size`                     | `auto`            | `@include grid-auto-cols(200px);`           |
+| `grid-content`     | `$justify`, `$align`        | `center`, `start` | `@include grid-content(center, start);`     |
+| `grid-place`       | `$value`                    | `center`          | `@include grid-place(center);`              |
+| `grid-place-content` | `$value`                  | `center`          | `@include grid-place-content(space-between);` |
+
+### NEW: Advanced Sizing Mixins
+
+| Mixin                  | Parameters                               | Defaults                        | Usage Example                                           |
+| ---------------------- | ---------------------------------------- | ------------------------------- | ------------------------------------------------------- |
+| `grid-minmax`          | `$min`, `$max`, `$repeat`, `$gap`        | `200px`, `1fr`, `auto-fit`, `1rem` | `@include grid-minmax(200px, 400px, auto-fit, 1rem);` |
+| `grid-fr`              | `$fr-values...`                          | required                        | `@include grid-fr(2fr, 1fr, 1fr);`                      |
+| `grid-intrinsic`       | `$repeat`, `$size`, `$gap`               | `auto-fit`, `max-content`, `1rem` | `@include grid-intrinsic(auto-fit, max-content, 0.5rem);` |
+| `grid-explicit`        | `$cols`, `$rows`, `$gap`                 | required, `auto`, `1rem`        | `@include grid-explicit(1fr 2fr, auto 200px, 1rem);`   |
+| `grid-fit-content`     | `$max-width`, `$repeat`, `$gap`          | `300px`, `auto-fit`, `1rem`     | `@include grid-fit-content(300px, auto-fit, 1rem);`    |
+| `grid-repeat-pattern`  | `$pattern`, `$count`, `$gap`             | required, `3`, `1rem`           | `@include grid-repeat-pattern(100px 200px, 3, 1rem);`  |
+| `grid-auto-track`      | `$repeat`, `$min`, `$max`, `$gap`        | `auto-fill`, `200px`, `1fr`, `1rem` | `@include grid-auto-track(auto-fill, 200px, 1fr, 1rem);` |
+
+### NEW: Positioning & Layout Mixins
+
+| Mixin                    | Parameters                               | Defaults                     | Usage Example                                                                      |
+| ------------------------ | ---------------------------------------- | ---------------------------- | ---------------------------------------------------------------------------------- |
+| `grid-layer`             | `$col-start`, `$col-end`, `$row-start`, `$row-end` | `1`, `-1`, `1`, `-1`  | `@include grid-layer(1, -1, 1, -1);`                                               |
+| `grid-full-width`        | none                                     | -                            | `@include grid-full-width;`                                                        |
+| `grid-full-height`       | none                                     | -                            | `@include grid-full-height;`                                                       |
+| `grid-areas-responsive`  | `$mobile-areas`, `$desktop-areas`, `$breakpoint` | required, required, `768px` | `@include grid-areas-responsive("header" "main", "header header" "sidebar main", 768px);` |
+| `grid-container-aware`   | `$min`, `$gap`                           | `250px`, `1rem`              | `@include grid-container-aware(250px, 1rem);`                                      |
+| `grid-masonry-modern`    | `$cols`, `$row-gap`, `$col-gap`          | `4`, `40px`, `1rem`          | `@include grid-masonry-modern(4, 40px, 1rem);`                                     |
 
 ### Responsive Grid Mixins
 
@@ -190,344 +285,376 @@ Complete list of all mixins with parameters, defaults, and usage examples.
 
 ## 📖 Detailed Documentation
 
-### Responsive Grid Mixins
+### Core Grid Mixins
 
-#### `@mixin grid-auto($min, $gap)`
+#### `@mixin grid-container($cols, $gap)`
 
-Creates a **responsive grid** that automatically fits as many columns as possible based on minimum width.
+**NEW in v1.2** - Simplified grid container initialization with columns and gap.
 
 **Parameters:**
-
-- `$min`: Minimum width per column (default: `250px`)
+- `$cols`: Number of columns (default: `12`)
 - `$gap`: Gap between items (default: `1rem`)
 
-**Use case:** Image galleries, product cards, any content that should flow naturally
+**Use case:** Quick setup for standard grid containers
 
 ```scss
-.gallery {
-  @include grid-auto(300px, 2rem);
+.container {
+  @include grid-container(12, 1rem);
 }
 
 // Compiles to:
-.gallery {
+.container {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 2rem;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1rem;
 }
 ```
 
 ---
 
-#### `@mixin grid-fill($min, $gap)`
+#### `@mixin grid-auto-flow($flow, $dense)`
 
-Similar to `grid-auto`, but uses `auto-fill` instead of `auto-fit`. Creates **empty columns** if there's extra space.
+**NEW in v1.2** - Controls automatic placement of grid items with optional dense packing.
 
 **Parameters:**
+- `$flow`: Flow direction - `row`, `column`, `row dense`, or `column dense` (default: `row`)
+- `$dense`: Enable dense packing algorithm (default: `false`)
 
-- `$min`: Minimum width per column (default: `250px`)
-- `$gap`: Gap between items (default: `1rem`)
-
-**Difference from `grid-auto`:**
-
-- `auto-fit`: Collapses empty tracks, items stretch to fill space
-- `auto-fill`: Keeps empty tracks, items maintain consistent size
+**Use case:** Control how items fill the grid and handle gaps
 
 ```scss
-.product-grid {
-  @include grid-fill(280px, 1.5rem);
+.masonry {
+  @include grid-auto(250px);
+  @include grid-auto-flow(row, true); // Fill gaps densely
+}
+
+// Compiles to:
+.masonry {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1rem;
+  grid-auto-flow: row dense;
 }
 ```
 
 ---
 
-#### `@mixin grid-cards($min, $max, $gap)`
+#### `@mixin grid-auto-rows($size)`
 
-Responsive card grid with **min/max constraints** for better control.
+**NEW in v1.2** - Sets the size of implicitly created rows.
 
 **Parameters:**
+- `$size`: Row size (default: `auto`) - Can be `100px`, `minmax(100px, auto)`, `auto`, etc.
 
-- `$min`: Minimum card width (default: `280px`)
-- `$max`: Maximum card width (default: `1fr`)
-- `$gap`: Gap between cards (default: `1.5rem`)
+**Use case:** Control height of dynamically added rows
 
 ```scss
-.cards {
-  @include grid-cards(300px, 400px, 2rem);
+.dynamic-grid {
+  @include grid-auto(300px);
+  @include grid-auto-rows(150px); // All rows 150px tall
 }
 ```
 
 ---
 
-### Fixed Grid Mixins
-
-#### `@mixin grid-cols($cols, $gap)`
+#### `@mixin grid-auto-cols($size)`
 
-Creates a grid with a **fixed number of columns**.
+**NEW in v1.2** - Sets the size of implicitly created columns.
 
 **Parameters:**
+- `$size`: Column size (default: `auto`)
 
-- `$cols`: Number of columns (default: `12`)
-- `$gap`: Gap between items (default: `1rem`)
+**Use case:** Control width of dynamically added columns
 
 ```scss
-.dashboard {
-  @include grid-cols(4, 1.5rem);
-}
-
-// Compiles to:
-.dashboard {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 1.5rem;
+.horizontal-scroll {
+  @include grid-auto-flow(column);
+  @include grid-auto-cols(300px); // Each column 300px wide
 }
 ```
 
 ---
 
-#### `@mixin grid-rows($rows, $gap)`
+#### `@mixin grid-content($justify, $align)`
 
-Creates a grid with a **fixed number of rows**.
+**NEW in v1.2** - Aligns the entire grid content block (not individual items).
 
 **Parameters:**
+- `$justify`: Horizontal alignment (default: `center`) - `start`, `end`, `center`, `stretch`, `space-around`, `space-between`, `space-evenly`
+- `$align`: Vertical alignment (default: `start`) - Same values as justify
 
-- `$rows`: Number of rows (default: `3`)
-- `$gap`: Gap between items (default: `1rem`)
+**Use case:** Center or position the entire grid within its container
 
 ```scss
-.vertical-layout {
-  @include grid-rows(5, 2rem);
+.centered-grid {
+  @include grid-cols(3, 2rem);
+  @include grid-content(center, center); // Center entire grid
+  height: 100vh;
 }
 ```
 
 ---
 
-#### `@mixin grid-template($template, $gap)`
+### Advanced Grid Mixins (NEW)
 
-Creates a grid with **custom column sizes**.
+#### `@mixin grid-minmax($min, $max, $repeat, $gap)`
 
-**Parameters:**
+**NEW in v1.2** - Explicit control over minmax with auto-fit or auto-fill.
 
-- `$template`: CSS grid-template-columns value
+**Parameters:**
+- `$min`: Minimum column width (default: `200px`)
+- `$max`: Maximum column width (default: `1fr`)
+- `$repeat`: `auto-fit` or `auto-fill` (default: `auto-fit`)
 - `$gap`: Gap between items (default: `1rem`)
 
+**Use case:** Fine-grained control over responsive column behavior
+
 ```scss
-.custom-layout {
-  @include grid-template(200px 1fr 300px, 2rem);
+.cards {
+  @include grid-minmax(200px, 400px, auto-fit, 1rem);
 }
 
-// Asymmetric layout
-.blog {
-  @include grid-template(2fr 1fr, 1rem);
+// Compiles to:
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 400px));
+  gap: 1rem;
 }
 ```
 
 ---
 
-### Layout Pattern Mixins
-
-#### `@mixin grid-sidebar($sidebar-width, $gap, $position)`
+#### `@mixin grid-fr($fr-values...)`
 
-Creates a **sidebar + main content** layout.
+**NEW in v1.2** - Create grid with explicit fr unit ratios.
 
 **Parameters:**
+- `$fr-values`: Variable number of fr values (required)
 
-- `$sidebar-width`: Width of sidebar (default: `300px`)
-- `$gap`: Gap between sidebar and content (default: `1rem`)
-- `$position`: `left` or `right` (default: `left`)
+**Use case:** Precise fractional layouts
 
 ```scss
 .layout {
-  @include grid-sidebar(250px, 2rem, left);
+  @include grid-fr(2fr, 1fr, 1fr); // 2:1:1 ratio
 }
 
-// Right sidebar
-.layout-alt {
-  @include grid-sidebar(300px, 1.5rem, right);
+// Compiles to:
+.layout {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
 }
 ```
 
 ---
 
-#### `@mixin grid-sidebar-responsive($sidebar-width, $gap, $breakpoint)`
+#### `@mixin grid-intrinsic($repeat, $size, $gap)`
 
-Sidebar that **stacks on mobile** and appears side-by-side on larger screens.
+**NEW in v1.2** - Uses intrinsic sizing functions.
 
 **Parameters:**
+- `$repeat`: `auto-fit` or `auto-fill` (default: `auto-fit`)
+- `$size`: `min-content`, `max-content`, or `fit-content(300px)` (default: `max-content`)
+- `$gap`: Gap between items (default: `1rem`)
 
-- `$sidebar-width`: Width of sidebar (default: `300px`)
-- `$gap`: Gap between elements (default: `1rem`)
-- `$breakpoint`: When to switch to sidebar layout (default: `768px`)
+**Use case:** Content-driven column sizes
 
 ```scss
-.responsive-layout {
-  @include grid-sidebar-responsive(280px, 1.5rem, 992px);
+.tags {
+  @include grid-intrinsic(auto-fit, max-content, 0.5rem);
 }
+
+// Each tag takes only the space it needs
 ```
 
 ---
 
-#### `@mixin grid-holy-grail($sidebar-width, $gap)`
+#### `@mixin grid-explicit($cols, $rows, $gap)`
 
-Classic **Holy Grail layout** (header, sidebar, content, footer).
+**NEW in v1.2** - Set both columns and rows explicitly in one mixin.
 
 **Parameters:**
+- `$cols`: Grid template columns (required)
+- `$rows`: Grid template rows (default: `auto`)
+- `$gap`: Gap between items (default: `1rem`)
 
-- `$sidebar-width`: Width of sidebars (default: `250px`)
-- `$gap`: Gap between elements (default: `1rem`)
+**Use case:** Complete grid definition in one line
 
 ```scss
-.page {
-  @include grid-holy-grail(200px, 1rem);
-}
-
-// HTML structure:
-.page {
-  .header {
-    grid-area: header;
-  }
-  .sidebar-left {
-    grid-area: sidebar-left;
-  }
-  .content {
-    grid-area: content;
-  }
-  .sidebar-right {
-    grid-area: sidebar-right;
-  }
-  .footer {
-    grid-area: footer;
-  }
+.dashboard {
+  @include grid-explicit(200px 1fr 300px, auto 1fr auto, 1rem);
 }
 ```
 
 ---
 
-#### `@mixin grid-full-bleed($content-width, $gap)`
+#### `@mixin grid-layer($col-start, $col-end, $row-start, $row-end)`
 
-Grid that allows items to **break out** to full width while keeping content centered.
+**NEW in v1.2** - Overlay elements across the entire grid.
 
 **Parameters:**
+- `$col-start`: Starting column (default: `1`)
+- `$col-end`: Ending column (default: `-1`)
+- `$row-start`: Starting row (default: `1`)
+- `$row-end`: Ending row (default: `-1`)
 
-- `$content-width`: Max width of content area (default: `1200px`)
-- `$gap`: Gap between items (default: `1rem`)
+**Use case:** Hero sections, overlays, backgrounds
 
 ```scss
-.article {
-  @include grid-full-bleed(800px, 2rem);
-
-  > * {
-    grid-column: 2; // Default content column
-  }
+.hero {
+  @include grid-auto(300px);
+  min-height: 500px;
 
-  .full-width-image {
-    grid-column: 1 / -1; // Break out to full width
+  .overlay {
+    @include grid-layer; // Spans entire grid
+    background: rgba(0, 0, 0, 0.5);
   }
 }
 ```
 
 ---
 
-#### `@mixin grid-masonry($cols, $gap)`
+#### `@mixin grid-fit-content($max-width, $repeat, $gap)`
 
-Creates a **masonry-style layout** effect.
+**NEW in v1.2** - Flexible column sizing with fit-content().
 
 **Parameters:**
-
-- `$cols`: Number of columns (default: `3`)
+- `$max-width`: Maximum width for fit-content (default: `300px`)
+- `$repeat`: `auto-fit` or `auto-fill` (default: `auto-fit`)
 - `$gap`: Gap between items (default: `1rem`)
 
-```scss
-.masonry {
-  @include grid-masonry(4, 1.5rem);
+**Use case:** Flexible content-aware columns with max width
 
-  .item {
-    grid-row-end: span 10; // Adjust based on content height
-  }
+```scss
+.navigation {
+  @include grid-fit-content(200px, auto-fit, 1rem);
 }
 ```
 
 ---
 
-### Grid Item Mixins
-
-#### `@mixin grid-span($col-span, $row-span)`
+#### `@mixin grid-repeat-pattern($pattern, $count, $gap)`
 
-Makes a grid item **span across multiple columns/rows**.
+**NEW in v1.2** - Repeats a custom column pattern.
 
 **Parameters:**
+- `$pattern`: Pattern to repeat (required) - e.g., `100px 200px`
+- `$count`: Number of times to repeat (default: `3`)
+- `$gap`: Gap between items (default: `1rem`)
 
-- `$col-span`: Number of columns to span (default: `1`)
-- `$row-span`: Number of rows to span (default: `1`)
+**Use case:** Alternating column widths
 
 ```scss
-.featured-card {
-  @include grid-span(2, 1); // Span 2 columns, 1 row
+.alternating {
+  @include grid-repeat-pattern(100px 200px, 3, 1rem);
+  // Results in: 100px 200px 100px 200px 100px 200px
 }
+```
+
+---
+
+#### `@mixin grid-areas-responsive($mobile-areas, $desktop-areas, $breakpoint)`
+
+**NEW in v1.2** - Responsive grid template areas for different breakpoints.
+
+**Parameters:**
+- `$mobile-areas`: Grid areas for mobile (required)
+- `$desktop-areas`: Grid areas for desktop (required)
+- `$breakpoint`: Breakpoint for switching layouts (default: `768px`)
+
+**Use case:** Completely different layouts for mobile vs desktop
 
-.large-item {
-  @include grid-span(3, 2); // Span 3 columns, 2 rows
+```scss
+.page {
+  @include grid-areas-responsive(
+    "header"
+    "main"
+    "sidebar"
+    "footer",
+    "header header"
+    "sidebar main"
+    "footer footer",
+    768px
+  );
+
+  .header { grid-area: header; }
+  .main { grid-area: main; }
+  .sidebar { grid-area: sidebar; }
+  .footer { grid-area: footer; }
 }
 ```
 
 ---
 
-#### `@mixin grid-area($col-start, $col-end, $row-start, $row-end)`
+#### `@mixin grid-container-aware($min, $gap)`
 
-Places item in a **specific grid area**.
+**NEW in v1.2** - Enables container queries for responsive grids.
 
 **Parameters:**
+- `$min`: Minimum column width (default: `250px`)
+- `$gap`: Gap between items (default: `1rem`)
 
-- `$col-start`: Starting column line
-- `$col-end`: Ending column line
-- `$row-start`: Starting row line (default: `auto`)
-- `$row-end`: Ending row line (default: `auto`)
+**Use case:** Component that responds to container size, not viewport
 
 ```scss
-.header {
-  @include grid-area(1, 4); // Columns 1-4
-}
+.card-container {
+  container-type: inline-size;
 
-.sidebar {
-  @include grid-area(1, 2, 2, 4); // Columns 1-2, Rows 2-4
+  .cards {
+    @include grid-container-aware(250px, 1rem);
+  }
 }
 ```
 
 ---
 
-#### `@mixin grid-order($order)`
+#### `@mixin grid-full-width`
 
-Changes the **visual order** of grid items without changing HTML.
+**NEW in v1.2** - Makes an item span all columns (shorthand for `grid-column: 1 / -1`).
 
-**Parameters:**
+```scss
+.hero-image {
+  @include grid-full-width;
+}
+
+// Compiles to:
+.hero-image {
+  grid-column: 1 / -1;
+}
+```
+
+---
+
+#### `@mixin grid-full-height`
 
-- `$order`: Order value (default: `0`)
+**NEW in v1.2** - Makes an item span all rows (shorthand for `grid-row: 1 / -1`).
 
 ```scss
-.first {
-  @include grid-order(-1); // Appears first
+.sidebar {
+  @include grid-full-height;
 }
 
-.last {
-  @include grid-order(999); // Appears last
+// Compiles to:
+.sidebar {
+  grid-row: 1 / -1;
 }
 ```
 
 ---
 
-### Alignment & Utility Mixins
+#### `@mixin grid-place($value)`
 
-#### `@mixin grid-center`
+**NEW in v1.2** - Concise shorthand for `place-items` property.
 
-Centers content **both horizontally and vertically** within a grid cell.
+**Parameters:**
+- `$value`: Alignment value (default: `center`) - `start`, `end`, `center`, `stretch`
 
 ```scss
-.hero {
-  @include grid-center;
-  min-height: 400px;
+.centered {
+  @include grid-place(center);
 }
 
 // Compiles to:
-.hero {
+.centered {
   display: grid;
   place-items: center;
 }
@@ -535,245 +662,254 @@ Centers content **both horizontally and vertically** within a grid cell.
 
 ---
 
-#### `@mixin grid-align($justify, $align)`
+#### `@mixin grid-place-content($value)`
 
-Aligns **all items** in the grid container.
+**NEW in v1.2** - Shorthand for `place-content` property.
 
 **Parameters:**
-
-- `$justify`: Horizontal alignment (default: `center`)
-- `$align`: Vertical alignment (default: `center`)
-
-**Values:** `start`, `end`, `center`, `stretch`
+- `$value`: Alignment value (default: `center`) - `start`, `end`, `center`, `space-between`, `space-around`, `space-evenly`
 
 ```scss
-.grid {
-  @include grid-align(start, center);
+.spaced-grid {
+  @include grid-place-content(space-between);
 }
 ```
 
 ---
 
-#### `@mixin grid-self($justify, $align)`
+#### `@mixin grid-masonry-modern($cols, $row-gap, $col-gap)`
 
-Aligns a **single grid item** within its cell.
+**NEW in v1.2** - Improved masonry layout with dense auto-flow.
 
 **Parameters:**
+- `$cols`: Number of columns (default: `4`)
+- `$row-gap`: Vertical gap (default: `40px`)
+- `$col-gap`: Horizontal gap (default: `1rem`)
 
-- `$justify`: Horizontal self-alignment (default: `auto`)
-- `$align`: Vertical self-alignment (default: `auto`)
+**Use case:** Better Pinterest-style layouts with improved gap packing
 
 ```scss
-.special-item {
-  @include grid-self(end, start);
+.pinterest {
+  @include grid-masonry-modern(4, 40px, 1rem);
+
+  .item {
+    grid-row-end: span 10; // Base height units
+  }
 }
 ```
 
 ---
 
-#### `@mixin grid-gap($row-gap, $col-gap)`
+#### `@mixin grid-auto-track($repeat, $min, $max, $gap)`
 
-Sets **different gaps** for rows and columns.
+**NEW in v1.2** - Flexible version combining auto-fit/fill with custom min/max.
 
 **Parameters:**
+- `$repeat`: `auto-fit` or `auto-fill` (default: `auto-fill`)
+- `$min`: Minimum track size (default: `200px`)
+- `$max`: Maximum track size (default: `1fr`)
+- `$gap`: Gap between items (default: `1rem`)
 
-- `$row-gap`: Vertical gap (default: `1rem`)
-- `$col-gap`: Horizontal gap (default: `1rem`)
+**Use case:** Maximum flexibility for responsive grids
 
 ```scss
-.grid {
-  @include grid-gap(2rem, 1rem); // More vertical space
+.flexible {
+  @include grid-auto-track(auto-fill, 200px, 300px, 1rem);
 }
 ```
 
 ---
 
-#### `@mixin grid-dense($min, $gap)`
+### Responsive Grid Mixins
+
+#### `@mixin grid-auto($min, $gap)`
 
-Fills gaps by placing items **densely** (useful for varying item sizes).
+Creates a **responsive grid** that automatically fits as many columns as possible based on minimum width.
 
 **Parameters:**
 
-- `$min`: Minimum item width (default: `150px`)
+- `$min`: Minimum width per column (default: `250px`)
 - `$gap`: Gap between items (default: `1rem`)
 
+**Use case:** Image galleries, product cards, any content that should flow naturally
+
 ```scss
-.pinterest-style {
-  @include grid-dense(200px, 1.5rem);
+.gallery {
+  @include grid-auto(300px, 2rem);
+}
+
+// Compiles to:
+.gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
 }
 ```
 
 ---
 
-#### `@mixin grid-equal-rows($rows, $gap)`
+#### `@mixin grid-fill($min, $gap)`
 
-Creates rows with **equal height**.
+Similar to `grid-auto`, but uses `auto-fill` instead of `auto-fit`. Creates **empty columns** if there's extra space.
 
 **Parameters:**
 
-- `$rows`: Number of rows (default: `3`)
-- `$gap`: Gap between rows (default: `1rem`)
+- `$min`: Minimum width per column (default: `250px`)
+- `$gap`: Gap between items (default: `1rem`)
+
+**Difference from `grid-auto`:**
+
+- `auto-fit`: Collapses empty tracks, items stretch to fill space
+- `auto-fill`: Keeps empty tracks, items maintain consistent size
 
 ```scss
-.equal-height {
-  @include grid-equal-rows(4, 1rem);
+.product-grid {
+  @include grid-fill(280px, 1.5rem);
 }
 ```
 
 ---
 
-#### `@mixin grid-subgrid($rows, $cols)`
+#### `@mixin grid-cards($min, $max, $gap)`
 
-Creates a **subgrid** (inherits parent grid lines).
+Responsive card grid with **min/max constraints** for better control.
 
 **Parameters:**
 
-- `$rows`: Use subgrid for rows (default: `true`)
-- `$cols`: Use subgrid for columns (default: `true`)
+- `$min`: Minimum card width (default: `280px`)
+- `$max`: Maximum card width (default: `1fr`)
+- `$gap`: Gap between cards (default: `1.5rem`)
 
 ```scss
-.parent {
-  @include grid-cols(4);
-}
-
-.nested-grid {
-  @include grid-span(2, 1);
-  @include grid-subgrid(false, true); // Inherit parent's columns
+.cards {
+  @include grid-cards(300px, 400px, 2rem);
 }
 ```
 
 ---
 
-#### `@mixin grid-stacked($cols, $gap, $breakpoint)`
+### Fixed Grid Mixins
 
-**Mobile-first stacked grid** that expands on larger screens.
+#### `@mixin grid-cols($cols, $gap)`
+
+Creates a grid with a **fixed number of columns**.
 
 **Parameters:**
 
-- `$cols`: Number of columns on desktop (default: `2`)
+- `$cols`: Number of columns (default: `12`)
 - `$gap`: Gap between items (default: `1rem`)
-- `$breakpoint`: When to switch to multi-column (default: `640px`)
 
 ```scss
-.cards {
-  @include grid-stacked(3, 1.5rem, 768px);
+.dashboard {
+  @include grid-cols(4, 1.5rem);
 }
 ```
 
 ---
 
-#### `@mixin grid-asymmetric($ratio, $gap)`
+#### `@mixin grid-rows($rows, $gap)`
 
-Creates an **asymmetric 2-column layout** with custom ratio.
+Creates a grid with a **fixed number of rows**.
 
 **Parameters:**
 
-- `$ratio`: Ratio of first column (default: `2`)
-- `$gap`: Gap between columns (default: `1rem`)
+- `$rows`: Number of rows (default: `3`)
+- `$gap`: Gap between items (default: `1rem`)
 
 ```scss
-.blog-layout {
-  @include grid-asymmetric(3, 2rem); // 3:1 ratio (main content : sidebar)
+.vertical-layout {
+  @include grid-rows(5, 2rem);
 }
 ```
 
 ---
 
-## 💡 Usage Examples
+#### `@mixin grid-template($template, $gap)`
 
-### Responsive Image Gallery
+Creates a grid with **custom column sizes**.
 
-```scss
-.gallery {
-  @include grid-auto(300px, 2rem);
+**Parameters:**
 
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 8px;
-  }
+- `$template`: CSS grid-template-columns value
+- `$gap`: Gap between items (default: `1rem`)
 
-  .featured {
-    @include grid-span(2, 2);
-  }
+```scss
+.custom-layout {
+  @include grid-template(200px 1fr 300px, 2rem);
 }
 ```
 
 ---
 
-### Dashboard Layout
+## 💡 Usage Examples
+
+### NEW: Modern Hero Section with Overlay
 
 ```scss
-.dashboard {
-  @include grid-template(250px 1fr, 1rem);
-  min-height: 100vh;
+.hero {
+  @include grid-container(1, 0);
+  min-height: 600px;
 
-  .sidebar {
-    @include grid-center;
-    background: #f5f5f5;
+  .background {
+    @include grid-layer; // Spans entire grid
+    background: url('hero.jpg') center/cover;
   }
 
-  .main-content {
-    @include grid-cols(3, 1.5rem);
-    padding: 2rem;
-
-    .widget {
-      padding: 1.5rem;
-      background: white;
-      border-radius: 8px;
+  .overlay {
+    @include grid-layer;
+    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6));
+  }
 
-      &.large {
-        @include grid-span(2, 1);
-      }
-    }
+  .content {
+    @include grid-layer;
+    @include grid-place(center);
+    color: white;
+    z-index: 2;
   }
 }
 ```
 
 ---
 
-### Blog Layout with Sidebar
+### NEW: Responsive Grid Template Areas
 
 ```scss
-.blog {
-  @include grid-sidebar-responsive(300px, 2rem, 992px);
-
-  .article {
-    @include grid-rows(auto 1fr auto, 1rem);
-
-    .article-header {
-      /* ... */
-    }
-    .article-content {
-      /* ... */
-    }
-    .article-footer {
-      /* ... */
-    }
-  }
+.app-layout {
+  @include grid-areas-responsive(
+    "header"
+    "nav"
+    "main"
+    "aside"
+    "footer",
+    "header header header"
+    "nav main aside"
+    "footer footer footer",
+    1024px
+  );
+  min-height: 100vh;
 
-  .sidebar {
-    .widget {
-      padding: 1.5rem;
-      margin-bottom: 1rem;
-    }
-  }
+  .header { grid-area: header; }
+  .nav { grid-area: nav; }
+  .main { grid-area: main; }
+  .aside { grid-area: aside; }
+  .footer { grid-area: footer; }
 }
 ```
 
 ---
 
-### Card Grid with Dense Packing
+### NEW: Advanced Card Grid with Custom Sizing
 
 ```scss
-.products {
-  @include grid-dense(280px, 1.5rem);
+.product-showcase {
+  @include grid-minmax(280px, 350px, auto-fit, 2rem);
+  @include grid-auto-flow(row, true); // Dense packing
+  @include grid-auto-rows(minmax(200px, auto));
 
-  .product-card {
+  .card {
     background: white;
-    border-radius: 8px;
-    padding: 1rem;
+    border-radius: 12px;
+    padding: 1.5rem;
 
     &.featured {
       @include grid-span(2, 2);
@@ -781,8 +917,8 @@ Creates an **asymmetric 2-column layout** with custom ratio.
       color: white;
     }
 
-    &.sale {
-      @include grid-span(1, 2);
+    &.tall {
+      grid-row-end: span 2;
     }
   }
 }
@@ -790,314 +926,267 @@ Creates an **asymmetric 2-column layout** with custom ratio.
 
 ---
 
-### Full-Width Content Sections
+### NEW: Container-Aware Component
 
 ```scss
-.article {
-  @include grid-full-bleed(800px, 2rem);
-
-  h1,
-  p,
-  ul {
-    grid-column: 2; // Content column
-  }
+.widget-container {
+  container-type: inline-size;
+  padding: 2rem;
 
-  .full-width-image {
-    grid-column: 1 / -1; // Break out to full width
-    width: 100%;
-    height: 500px;
-    object-fit: cover;
-  }
+  .widgets {
+    @include grid-container-aware(250px, 1rem);
 
-  .highlight-box {
-    grid-column: 1 / -1;
-    background: #f0f0f0;
-    padding: 2rem;
-    text-align: center;
+    .widget {
+      background: white;
+      padding: 1rem;
+      border-radius: 8px;
+    }
   }
 }
 ```
 
 ---
 
-### Responsive Navigation
+### Responsive Image Gallery
 
 ```scss
-.nav {
-  @include grid-stacked(4, 1rem, 768px);
+.gallery {
+  @include grid-auto(300px, 2rem);
 
-  a {
-    @include grid-center;
-    padding: 1rem;
-    text-decoration: none;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 8px;
+  }
 
-    &:hover {
-      background: #f0f0f0;
-    }
+  .featured {
+    @include grid-span(2, 2);
   }
 }
 ```
 
 ---
 
-### Holy Grail Layout
-
-```scss
-.page-layout {
-  @include grid-holy-grail(200px, 1rem);
+## ✅ Best Practices
 
-  .header {
-    grid-area: header;
-    @include grid-center;
-    background: #333;
-    color: white;
-    padding: 1rem;
-  }
+### 1. **Use the Right Mixin for Your Needs**
 
-  .sidebar-left {
-    grid-area: sidebar-left;
-    background: #f5f5f5;
-  }
+```scss
+// ✅ For dynamic content that should flow
+.gallery {
+  @include grid-auto(300px);
+}
 
-  .content {
-    grid-area: content;
-    @include grid-auto(300px, 1.5rem);
-  }
+// ✅ For fixed layouts
+.dashboard {
+  @include grid-cols(4);
+}
 
-  .sidebar-right {
-    grid-area: sidebar-right;
-    background: #f5f5f5;
-  }
+// ✅ NEW: For precise control
+.custom {
+  @include grid-minmax(200px, 400px, auto-fit);
+}
 
-  .footer {
-    grid-area: footer;
-    @include grid-center;
-    background: #222;
-    color: white;
-    padding: 2rem;
-  }
+// ✅ NEW: For content-driven sizing
+.tags {
+  @include grid-intrinsic(auto-fit, max-content);
 }
 ```
 
 ---
 
-## ✅ Best Practices
-
-### 1. **Choose the Right Mixin**
-
-- Use `grid-auto()` for **content that should flow naturally** (galleries, products)
-- Use `grid-cols()` for **fixed layouts** (dashboards, forms)
-- Use `grid-sidebar()` for **classic two-column layouts**
-- Use `grid-template()` for **precise control** over column sizes
-
----
-
-### 2. **Mobile-First Approach**
-
-Start with mobile styles and use responsive mixins to adapt:
+### 2. **Combine New Mixins for Power**
 
 ```scss
-.cards {
-  // Mobile: 1 column
-  @include grid-cols(1, 1rem);
+.advanced-grid {
+  @include grid-container(12, 1rem);
+  @include grid-auto-flow(row, true); // Dense packing
+  @include grid-auto-rows(minmax(100px, auto));
 
-  @media (min-width: 768px) {
-    // Tablet: 2 columns
-    @include grid-cols(2, 1.5rem);
+  .item {
+    @include grid-self(center, start);
   }
 
-  @media (min-width: 1024px) {
-    // Desktop: auto-responsive
-    @include grid-auto(300px, 2rem);
+  .full-width {
+    @include grid-full-width;
   }
 }
 ```
 
 ---
 
-### 3. **Consistent Gap Values**
-
-Define gap variables for consistency:
+### 3. **Mobile-First with New Features**
 
 ```scss
-$gap-sm: 0.5rem;
-$gap-md: 1rem;
-$gap-lg: 1.5rem;
-$gap-xl: 2rem;
+.responsive-cards {
+  // Mobile: Stack
+  @include grid-container(1, 1rem);
+
+  @media (min-width: 640px) {
+    // Tablet: 2 columns
+    @include grid-cols(2, 1rem);
+  }
 
-.grid {
-  @include grid-auto(300px, $gap-lg);
+  @media (min-width: 1024px) {
+    // Desktop: Auto-responsive with minmax control
+    @include grid-minmax(280px, 350px, auto-fit, 2rem);
+  }
 }
 ```
 
 ---
 
-### 4. **Semantic Class Names**
-
-Use descriptive class names that explain purpose:
+### 4. **Use New Alignment Shortcuts**
 
 ```scss
-// ✅ Good
-.product-grid {
-  @include grid-auto(280px);
-}
-.article-layout {
-  @include grid-sidebar(300px);
+// ✅ NEW: Concise centering
+.hero {
+  @include grid-place(center);
+  min-height: 400px;
 }
 
-// ❌ Avoid
-.grid-1 {
-  @include grid-auto(280px);
+// ✅ NEW: Content alignment
+.spaced {
+  @include grid-cols(3);
+  @include grid-place-content(space-between);
 }
-.layout-2 {
-  @include grid-sidebar(300px);
-}
-```
-
----
-
-### 5. **Combine Mixins Thoughtfully**
-
-```scss
-.complex-layout {
-  @include grid-sidebar(250px, 2rem);
-
-  .sidebar {
-    @include grid-rows(auto 1fr auto);
-  }
 
-  .main-content {
-    @include grid-auto(300px, 1.5rem);
-
-    .featured {
-      @include grid-span(2, 1);
-    }
-  }
+// ✅ NEW: Grid content positioning
+.centered-grid {
+  @include grid-cols(3);
+  @include grid-content(center, center);
+  height: 100vh;
 }
 ```
 
 ---
 
-### 6. **Test Responsiveness**
-
-Always test with:
+## 🌐 Browser Support
 
-- Different screen sizes (mobile, tablet, desktop)
-- Different content amounts (1 item, 10 items, 100 items)
-- Different item sizes (varying heights, widths)
+- **Modern Browsers:** Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+
+- **CSS Grid:** 96%+ global support
+- **Subgrid:** Chrome 117+, Firefox 71+, Safari 16+
+- **Container Queries:** Chrome 105+, Firefox 110+, Safari 16+
+- **place-items/place-content:** Chrome 59+, Firefox 45+, Safari 11+
 
 ---
 
-### 7. **Use Subgrid When Appropriate**
+## 📋 Changelog
 
-For nested grids that need to align with parent:
+### Version 1.2.0
 
-```scss
-.parent {
-  @include grid-cols(4);
+**Released:** January 2, 2026
 
-  .nested {
-    @include grid-span(2, 1);
-    @include grid-subgrid(false, true); // Align with parent columns
-  }
-}
-```
+#### 🎉 Major Features
 
----
-
-## 🌐 Browser Support
+- **20 New Mixins Added** - Expanded from 23 to 43 total mixins
+- **Enhanced Core Setup** - New container and auto-flow mixins
+- **Advanced Sizing Controls** - Minmax, fr units, intrinsic sizing
+- **Modern CSS Support** - Container queries, place properties
+- **Improved Masonry** - Better dense packing algorithm
 
-- **Modern Browsers:** Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+
-- **CSS Grid:** 95%+ global support
-- **Subgrid:** Chrome 117+, Firefox 71+, Safari 16+ (use fallbacks for older browsers)
+#### ✨ New Mixins
 
----
+**Core Grid Setup (4 mixins):**
+- `grid-container` - Simplified grid initialization
+- `grid-auto-flow` - Control auto-placement with dense packing
+- `grid-auto-rows` - Set automatic row sizing
+- `grid-auto-cols` - Set automatic column sizing
 
-## ❓ FAQ
+**Advanced Sizing (7 mixins):**
+- `grid-minmax` - Explicit minmax control
+- `grid-fr` - Explicit fr unit ratios
+- `grid-intrinsic` - Intrinsic sizing (min/max/fit-content)
+- `grid-explicit` - Set columns and rows in one mixin
+- `grid-fit-content` - Flexible fit-content() sizing
+- `grid-repeat-pattern` - Repeat custom patterns
+- `grid-auto-track` - Flexible auto-fit/fill with custom min/max
 
-### Can I use this with Bootstrap or Tailwind?
+**Layout & Positioning (6 mixins):**
+- `grid-layer` - Overlay elements across grid
+- `grid-full-width` - Span all columns shorthand
+- `grid-full-height` - Span all rows shorthand
+- `grid-areas-responsive` - Responsive grid template areas
+- `grid-container-aware` - Container query support
+- `grid-masonry-modern` - Improved masonry layout
 
-Yes! Mastors-Gridder is framework-agnostic and works alongside any CSS framework. Use it for custom grid layouts where framework utilities fall short.
+**Alignment (3 mixins):**
+- `grid-place` - Concise place-items shorthand
+- `grid-place-content` - place-content shorthand
+- `grid-content` - Align entire grid content
 
----
+#### 🔧 Improvements
 
-### Why SCSS mixins instead of CSS classes?
+- Better documentation with comprehensive examples
+- More intuitive parameter names and defaults
+- Enhanced performance with modern CSS features
+- Improved browser compatibility notes
+- Extended FAQ section
 
-**Advantages of mixins:**
+#### 📚 Documentation
 
-- More semantic HTML (no utility class clutter)
-- Greater flexibility and customization
-- Better for component-based architecture
-- Compile-time optimizations
-- No CSS bloat from unused classes
+- Complete quick reference tables for all mixins
+- Real-world usage examples for new features
+- Updated best practices section
+- Enhanced browser support information
 
 ---
 
-### How do I handle IE11?
+### Version 1.0.0
 
-CSS Grid is not fully supported in IE11. Use feature queries:
+**Released:** December 30, 2025 - Initial Release
 
-```scss
-.grid {
-  display: flex; // Fallback
-  flex-wrap: wrap;
+#### 🎉 Features
 
-  @supports (display: grid) {
-    @include grid-auto(300px);
-  }
-}
-```
+- ⭐ 23 production-ready grid mixins
+- ⭐ Responsive grid utilities (auto-fit, auto-fill)
+- ⭐ Common layout patterns (sidebar, holy grail, full-bleed)
+- ⭐ Grid item positioning mixins (span, area, order)
+- ⭐ Alignment utilities (center, align, self)
+- ⭐ Advanced features (subgrid, dense packing, masonry)
+- ⭐ Comprehensive documentation with real-world examples
+- ⭐ Mobile-first approach with responsive helpers
+- ⭐ Zero dependencies, framework-agnostic
 
 ---
 
-### Can I customize the mixins?
-
-Absolutely! Copy the mixin code and modify parameters, add new features, or create your own custom mixins based on these templates.
-
----
+## ❓ FAQ
 
-### How do I debug grid layouts?
+### What's the difference between v1.0 and v1.2?
 
-Use browser DevTools:
+Version 1.2 adds **20 powerful new mixins** (nearly doubling the library), introduces modern CSS features like container queries, provides more granular control over grid behavior, and includes enhanced alignment shortcuts and improved masonry layouts.
 
-```scss
-// Temporary debug styles
-.grid {
-  @include grid-auto(300px);
+---
 
-  > * {
-    border: 1px solid red; // Visualize grid items
-  }
-}
-```
+### Can I use the new container-aware features?
 
-Or use Firefox Grid Inspector / Chrome Grid Overlay tools.
+Yes! The `grid-container-aware` mixin uses CSS Container Queries, which are supported in Chrome 105+, Firefox 110+, and Safari 16+. For older browsers, use traditional media queries as a fallback.
 
 ---
 
-### What's the performance impact?
+### Should I use `grid-place` or `grid-center`?
 
-CSS Grid is highly performant and hardware-accelerated. These mixins compile to standard CSS Grid properties with no runtime overhead.
+- Use `grid-place(center)` when you want concise centering with flexibility
+- Use `grid-center` when you want explicit centering (clearer intent)
+- Both compile to the same CSS
 
 ---
 
-## 📋 Changelog
+### How do I migrate from v1.0 to v1.2?
 
-### Version 1.0.0
+Version 1.2 is **100% backward compatible**. All v1.0 mixins work identically. Simply update the library and optionally adopt new mixins where they improve your code.
 
-**Released:** December 30, 2025 - Initial Release
+---
 
-#### 🎉 Features
+### Which new mixins should I learn first?
 
-- ⭐ 25+ production-ready grid mixins
-- ⭐ Responsive grid utilities (auto-fit, auto-fill)
-- ⭐ Common layout patterns (sidebar, holy grail, full-bleed)
-- ⭐ Grid item positioning mixins (span, area, order)
-- ⭐ Alignment utilities (center, align, self)
-- ⭐ Advanced features (subgrid, dense packing, masonry)
-- ⭐ Comprehensive documentation with real-world examples
-- ⭐ Mobile-first approach with responsive helpers
-- ⭐ Zero dependencies, framework-agnostic
+Start with these high-impact additions:
+1. `grid-full-width` / `grid-full-height` - Instant spanning
+2. `grid-minmax` - Better responsive control
+3. `grid-place` - Concise alignment
+4. `grid-layer` - Overlay elements
+5. `grid-auto-flow` - Control item placement
 
 ---
 
@@ -1127,4 +1216,5 @@ Found an issue or have a suggestion? Contributions are welcome!
 
 **Maintained by:** [KEHEM-IT](https://github.com/KEHEM-IT)  
 **License:** Free to Use  
-**Version:** 1.0.0
+**Current Version:** 1.2.0  
+**Last Updated:** January 2, 2026