Grid system mixin from scratch in SASS - Mini Project: Build & Apply

Grid system mixin from scratch

📖 Scenario: You are building a simple grid system for a website layout. This grid system will help arrange content in columns that adapt to different screen sizes. You will create a Sass mixin that generates CSS grid columns based on the number of columns you want.

🎯 Goal: Create a Sass mixin called grid-column that takes a number of columns as input and sets the width of the element accordingly. Use this mixin to style grid items so they fit nicely in a 12-column grid layout.

📋 What You'll Learn

Create a Sass variable for the total number of columns in the grid (12).

Write a mixin named grid-column that accepts a parameter $cols for the number of columns to span.

The mixin should calculate the width as a percentage based on $cols and the total columns.

Use the mixin to style grid items with different column spans.

Ensure the grid container uses CSS Flexbox to arrange items in a row.

💡 Why This Matters

🌍 Real World

Grid systems are used in web design to create clean, organized layouts that adapt to different screen sizes. This project shows how to build a simple grid system from scratch using Sass.

💼 Career

Understanding how to create and use mixins for layout helps front-end developers write reusable, maintainable CSS and build responsive websites efficiently.

1

Set up the total columns variable

Create a Sass variable called $total-columns and set it to 12 to represent the total number of columns in the grid.

SASS

$total-columns: 12;
// Your code here

Need a hint?

Use $total-columns: 12; to define the total columns.

2

Create the grid-column mixin

Write a Sass mixin named grid-column that takes a parameter $cols. Inside the mixin, calculate the width as ($cols / $total-columns) * 100% and set it as the element's width.

SASS

$total-columns: 12;

@mixin grid-column($cols) {
  // Your code here
}

Need a hint?

Use @mixin grid-column($cols) { width: ($cols / $total-columns) * 100%; }.

3

Set up the grid container with Flexbox

Create a CSS class .grid-container that uses Flexbox with display: flex; and allows wrapping with flex-wrap: wrap;.

SASS

$total-columns: 12;

@mixin grid-column($cols) {
  width: ($cols / $total-columns) * 100%;
}

.grid-container {
  // Your code here
}

Need a hint?

Use display: flex; and flex-wrap: wrap; inside .grid-container.

4

Use the mixin to style grid items

Create CSS classes .col-4 and .col-8 that include the grid-column mixin with $cols set to 4 and 8 respectively.

SASS

$total-columns: 12;

@mixin grid-column($cols) {
  width: ($cols / $total-columns) * 100%;
}

.grid-container {
  display: flex;
  flex-wrap: wrap;
}

.col-4 {
  // Your code here
}

.col-8 {
  // Your code here
}

Need a hint?

Use @include grid-column(4); in .col-4 and @include grid-column(8); in .col-8.