Why custom grids offer control in SASS - See It in Action

Why Custom Grids Offer Control

📖 Scenario: You are building a simple webpage layout using CSS Grid with Sass. You want to create a custom grid that gives you control over the number of columns and the gap between them. This helps you arrange content neatly and responsively.

🎯 Goal: Create a Sass variable for the number of columns, another for the gap size, then write a CSS Grid container style that uses these variables to control the grid layout.

📋 What You'll Learn

Create a Sass variable $columns with the value 4

Create a Sass variable $gap with the value 1.5rem

Write a CSS class .grid-container that uses display: grid;

Use grid-template-columns with repeat($columns, 1fr) to create equal columns

Use gap property with the $gap variable

💡 Why This Matters

🌍 Real World

Custom grids let web designers control layout easily and consistently across pages.

💼 Career

Knowing how to use Sass variables with CSS Grid is a valuable skill for front-end developers to build responsive, maintainable layouts.

1

Set up the number of columns variable

Create a Sass variable called $columns and set it to 4.

SASS

# Your code here

Need a hint?

Use $columns: 4; to create the variable.

2

Add the gap size variable

Add a Sass variable called $gap and set it to 1.5rem.

SASS

$columns: 4;
# Your code here

Need a hint?

Use $gap: 1.5rem; to create the gap variable.

3

Create the grid container class

Write a CSS class called .grid-container that sets display: grid;.

SASS

$columns: 4;
$gap: 1.5rem;

.grid-container {
  /* Your code here */
}

Need a hint?

Use display: grid; inside the .grid-container class.

4

Use variables to define columns and gap

Inside the .grid-container class, add grid-template-columns: repeat($columns, 1fr); and gap: $gap; to control the grid layout.

SASS

$columns: 4;
$gap: 1.5rem;

.grid-container {
  display: grid;
  /* Your code here */
}

Need a hint?

Use grid-template-columns: repeat($columns, 1fr); and gap: $gap; inside the .grid-container class.