What is Grid system mixin from scratch in SASS?

SASSmarkup~5 mins

Grid system mixin from scratch in SASS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

A grid system helps arrange content neatly in rows and columns. A mixin lets you reuse grid code easily in your styles.

You want to create a layout with columns that adjust on different screen sizes.

You need a simple way to divide a page into equal parts without writing repetitive code.

You want to build a responsive design that looks good on phones and computers.

You want to control spacing between items in a flexible way.

You want to keep your CSS clean by reusing grid code with a mixin.

Syntax

SASS

@mixin grid($columns, $gap: 1rem) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gap;
}

$columns sets how many columns you want.

$gap sets space between columns and rows, default is 1rem.

Examples

This is the basic mixin to create a grid with equal columns and space between them.

SASS

@mixin grid($columns, $gap: 1rem) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gap;
}

Creates a grid container with 3 equal columns and default gap of 1rem.

SASS

.container {
  @include grid(3);
}

Creates a grid container with 4 columns and 2rem gap between items.

SASS

.container {
  @include grid(4, 2rem);
}

Sample Program

This example shows a grid container with 3 columns and 1.5rem gap. On small screens, it changes to 1 column for easy reading. Each item is styled with color and padding. The container uses the grid mixin for layout.

SASS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Grid System Mixin Example</title>
  <style type="text/scss">
    @mixin grid($columns, $gap: 1rem) {
      display: grid;
      grid-template-columns: repeat($columns, 1fr);
      gap: $gap;
    }

    .container {
      @include grid(3, 1.5rem);
      background-color: #f0f0f0;
      padding: 1rem;
    }

    .item {
      background-color: #4a90e2;
      color: white;
      padding: 1rem;
      text-align: center;
      border-radius: 0.5rem;
      font-weight: bold;
      font-size: 1.2rem;
    }

    @media (max-width: 600px) {
      .container {
        @include grid(1, 1rem);
      }
    }
  </style>
</head>
<body>
  <main>
    <section class="container" aria-label="Sample grid container">
      <div class="item" tabindex="0">Item 1</div>
      <div class="item" tabindex="0">Item 2</div>
      <div class="item" tabindex="0">Item 3</div>
      <div class="item" tabindex="0">Item 4</div>
      <div class="item" tabindex="0">Item 5</div>
      <div class="item" tabindex="0">Item 6</div>
    </section>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Use repeat($columns, 1fr) to create equal width columns easily.

Set gap to control space between rows and columns at once.

Use media queries to change the number of columns on smaller screens for better readability.

Summary

A grid mixin helps create flexible column layouts with less code.

You can set how many columns and the gap between them easily.

Responsive design is simple by changing columns in media queries.