Mastors Gridder
v1.0.0 - Latest Release
v1.0.0 - Latest Release
Built with auto-fit, auto-fill, and responsive patterns for all screen sizes.
Choose between powerful SCSS mixins or ready-to-use CSS utility classes.
Pre-built patterns like Holy Grail, Sidebar, Masonry, and more.
Optimized for performance with minimal CSS footprint.
Customizable mixins with parameters for any grid layout need.
Battle-tested utilities for modern web applications.
Add this link in your HTML <head>:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/KEHEM-IT/Mastors-Gridder@main/mastors-gridder.css">Install via npm (coming soon):
npm install mastors-gridderImport the SCSS file in your project:
@use 'mastors-gridder/mastors-gridder' as *;
// Usage
.gallery {
@include grid-auto(300px, 2rem);
}You can now use grid mixins in SCSS or utility classes in HTML.
Creates a responsive grid that automatically fits columns based on available space.
$min - Minimum column width
(default: 250px)$gap - Gap between items (default:
1rem).gallery {
@include grid-auto(300px, 2rem);
}
// Smaller items
.thumbnail-grid {
@include grid-auto(150px, 1rem);
}.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.thumbnail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
}Creates a responsive grid that fills with empty columns when space is available.
$min - Minimum column width
(default: 250px)$gap - Gap between items (default:
1rem).products {
@include grid-fill(280px, 1.5rem);
}.products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}Creates a grid with a specific number of equal-width columns.
$cols - Number of columns (default:
12)$gap - Gap between items (default:
1rem).dashboard {
@include grid-cols(4, 1.5rem);
}
.three-column {
@include grid-cols(3, 2rem);
}.dashboard {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.three-column {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}Centers content both horizontally and vertically within a grid cell.
.hero {
@include grid-center;
min-height: 400px;
}.hero {
display: grid;
place-items: center;
min-height: 400px;
}Makes a grid item span across multiple columns and/or rows.
$col-span - Number of columns to
span (default: 1)$row-span - Number of rows to span
(default: 1).featured {
@include grid-span(2, 1); // Span 2 columns
}
.hero-banner {
@include grid-span(3, 2); // Span 3 columns and 2 rows
}.featured {
grid-column: span 2;
grid-row: span 1;
}
.hero-banner {
grid-column: span 3;
grid-row: span 2;
}Creates a sidebar + main content layout.
$sidebar-width - Width of sidebar
(default: 300px)$gap - Gap between sidebar and
content (default: 1rem)$position - left or right (default:
left)Classic header/sidebar/content/footer layout pattern.
$sidebar-width - Width of sidebars
(default: 250px)$gap - Gap between areas (default:
1rem).page {
@include grid-holy-grail(200px, 1rem);
}.page {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"sidebar-left content sidebar-right"
"footer footer footer";
gap: 1rem;
min-height: 100vh;
}Responsive card grid with min/max sizes for optimal card layouts.
$min - Minimum card width (default:
280px)$max - Maximum card width (default:
1fr)$gap - Gap between cards (default:
1.5rem).products {
@include grid-cards(300px, 1fr, 2rem);
}.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 2rem;
}Creates a masonry-style grid layout effect.
$cols - Number of columns (default:
3)$gap - Gap between items (default:
1rem).pinterest {
@include grid-masonry(4, 1rem);
}.pinterest {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 10px;
gap: 1rem;
}| Mixin | Purpose | Example |
|---|---|---|
grid-auto() |
Auto-fit responsive | @include grid-auto(300px) |
grid-fill() |
Auto-fill responsive | @include grid-fill(250px) |
grid-cols() |
Fixed columns | @include grid-cols(4) |
grid-center() |
Center content | @include grid-center |
grid-span() |
Span columns/rows | @include grid-span(2, 1) |
grid-sidebar() |
Sidebar layout | @include grid-sidebar(300px) |
grid-holy-grail() |
Holy Grail layout | @include grid-holy-grail(250px)
|
grid-cards() |
Card grid | @include grid-cards(280px) |
Ready-to-use utility classes for rapid responsive development without SCSS compilation.
Automatically fits columns based on available space.
| Class | Min Width | Description |
|---|---|---|
.grid-auto-sm |
150px | Small items |
.grid-auto
|
250px | Default size |
.grid-auto-md |
250px | Medium items |
.grid-auto-lg |
350px | Large items |
<div class="grid-auto gap-lg">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}Create grids with a specific number of equal-width columns.
.grid-cols-1
.grid-cols-2
.grid-cols-3
.grid-cols-4
.grid-cols-5
.grid-cols-6
.grid-cols-8
.grid-cols-12
<div class="grid-cols-3 gap-md">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>.grid-cols-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}Control spacing between grid items.
.gap-0
.gap-xs
.gap-sm
.gap-md
.gap-lg
.gap-xl
Also available: .gap-x-* and .gap-y-* for horizontal and vertical gaps.
Make items span across multiple columns or rows.
.col-span-1
.col-span-2
.col-span-3
.col-span-4
.col-span-5
.col-span-6
.col-span-full
.row-span-1
.row-span-2
.row-span-3
.row-span-4
.row-span-full
<div class="grid-cols-4 gap-md">
<div class="col-span-2">Spans 2 columns</div>
<div>Normal</div>
<div>Normal</div>
</div>.col-span-2 {
grid-column: span 2;
}
.col-span-full {
grid-column: 1 / -1;
}Common layout patterns ready to use.
.grid-sidebar
.grid-sidebar-sm
.grid-sidebar-right
.grid-sidebar-sm-right
.grid-holy-grail
<div class="grid-holy-grail">
<header class="grid-area-header">Header</header>
<aside class="grid-area-sidebar-left">Left Sidebar</aside>
<main class="grid-area-content">Main Content</main>
<aside class="grid-area-sidebar-right">Right Sidebar</aside>
<footer class="grid-area-footer">Footer</footer>
</div>.grid-holy-grail {
display: grid;
grid-template-columns: 250px 1fr 250px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"sidebar-left content sidebar-right"
"footer footer footer";
gap: 1rem;
min-height: 100vh;
}.grid-cards
.grid-cards-sm
.grid-cards-lg
.grid-center
Control the alignment of grid items and content.
.justify-items-start
.justify-items-center
.justify-items-end
.justify-items-stretch
.align-items-start
.align-items-center
.align-items-end
.align-items-stretch
.place-items-center
.place-items-start
.place-items-end
.place-content-center
.place-content-start
.place-content-end
A fully responsive gallery that adapts to any screen size.
<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
<img src="image5.jpg" alt="Image 5">
<img src="image6.jpg" alt="Image 6">
</div>.gallery {
@include grid-auto(280px, 1.5rem);
img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 0.5rem;
}
}.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.gallery img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 0.5rem;
}Product cards with featured items spanning multiple columns.
<div class="products">
<div class="product featured">Featured Product</div>
<div class="product">Product 2</div>
<div class="product">Product 3</div>
<div class="product">Product 4</div>
<div class="product">Product 5</div>
</div>.products {
@include grid-auto(300px, 2rem);
.featured {
@include grid-span(2, 1);
}
}.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.products .featured {
grid-column: span 2;
grid-row: span 1;
}Complex dashboard with sidebar navigation and widget grid.
<div class="dashboard">
<aside class="sidebar">Navigation</aside>
<main class="main">
<div class="widgets">
<div class="widget large">Analytics</div>
<div class="widget">Users</div>
<div class="widget">Revenue</div>
<div class="widget">Orders</div>
</div>
</main>
</div>.dashboard {
@include grid-sidebar(250px, 2rem, left);
min-height: 100vh;
}
.widgets {
@include grid-cols(3, 1.5rem);
.large {
@include grid-span(2, 1);
}
}.dashboard {
display: grid;
grid-template-columns: 250px 1fr;
gap: 2rem;
min-height: 100vh;
}
.widgets {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.widgets .large {
grid-column: span 2;
grid-row: span 1;
}Magazine-style blog layout with featured posts.
<div class="blog-grid">
<article class="post featured">Featured Article</article>
<article class="post">Post 2</article>
<article class="post">Post 3</article>
<article class="post">Post 4</article>
<article class="post">Post 5</article>
</div>.blog-grid {
@include grid-cols(3, 2rem);
.featured {
@include grid-span(3, 1);
}
}.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.blog-grid .featured {
grid-column: span 3;
grid-row: span 1;
}Track updates, improvements, and new features introduced in Mastors Gridder.
Common questions about using Mastors Gridder in real projects.
Mastors Gridder is a modern CSS & SCSS grid utility that helps you build responsive, flexible, and production-ready layouts using CSS Grid.
No. You can use the precompiled CSS via CDN. SCSS is optional but recommended if you want customization and mixins.
Yes. Mastors Gridder follows a mobile-first approach and scales naturally across breakpoints.
Absolutely. It supports subgrid, dense packing, masonry-style layouts, and classic patterns like holy grail and sidebars.
Yes. It’s designed to be minimal, utility-focused, and free from unnecessary bloat.
Yes. Mastors Gridder is fully open-source and maintained on GitHub. Contributions and feedback are welcome.
Mastors Gridder uses modern CSS Grid features. All major browsers released after 2017 are fully supported.