0
0
SASSmarkup~5 mins

Why custom grids offer control in SASS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Custom grids let you design page layouts exactly how you want. They give you control over spacing, columns, and alignment.

When you want a unique page layout that standard grids can't create.
When you need precise control over how content fits on different screen sizes.
When you want to create a consistent design system for your website.
When you want to easily adjust spacing and alignment without rewriting HTML.
When you want to build responsive layouts that adapt smoothly to devices.
Syntax
SASS
@mixin custom-grid($columns, $gap) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gap;
}

This mixin creates a grid with a set number of columns and gap size.

You can reuse it with different values to make many grid layouts.

Examples
Creates a grid with 3 equal columns and 1rem gap between them.
SASS
@include custom-grid(3, 1rem);
Creates a grid with 4 columns and larger 2rem gaps for more space.
SASS
@include custom-grid(4, 2rem);
Creates a tighter grid with 2 columns and small gaps.
SASS
@include custom-grid(2, 0.5rem);
Sample Program

This example uses a custom grid mixin to create a 3-column layout with equal spacing. Each item is styled for clear visibility and accessibility roles are added.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Custom Grid Example</title>
  <style>
    /* Sass mixins cannot be used directly in <style> tags; this is for demonstration only. */
    /* In practice, compile Sass to CSS before using in HTML. */
  </style>
</head>
<body>
  <section class="grid-container" role="grid" aria-label="Sample custom grid">
    <div class="grid-item" role="gridcell">Item 1</div>
    <div class="grid-item" role="gridcell">Item 2</div>
    <div class="grid-item" role="gridcell">Item 3</div>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Custom grids let you change columns and gaps easily without changing HTML.

Using mixins keeps your code clean and reusable.

Always add roles and labels for accessibility when using grids.

Summary

Custom grids give you full control over layout columns and spacing.

They help create flexible, reusable designs that adapt well to different screens.

Using Sass mixins makes it easy to apply and change grid settings.