Grid Cell Width Calculator

Build a Sass utility that calculates grid cell widths and protects against column overflow for responsive layouts.

Overview

Create a Sass function library that calculates cell widths for a responsive grid system supporting three device types: desktop (12 columns), tablet (8 columns), and phone (4 columns). The system must prevent layout breaks by clamping spans that exceed available columns.

Requirements

Device Configuration

Support three device types:

• Desktop: 12 columns maximum, 24px gutter
• Tablet: 8 columns maximum, 16px gutter
• Phone: 4 columns maximum, 16px gutter

Functionality

Your Sass module must provide functions that:

1. Validate and clamp column spans - Ensure a requested span doesn't exceed the device's maximum columns. If it does, return the device's column count instead.

2. Calculate Flexbox widths - Compute percentage-based widths using the formula: calc(100% / columns * span - gutter). This supports browsers that use Flexbox for grid rendering.

3. Calculate CSS Grid spans - Return the appropriate span value for CSS Grid's grid-column-end: span N property, ensuring it doesn't exceed available columns.

4. Generate device-specific results - Given a requested span, return calculated values for a specific device type, including both Flexbox width and Grid span.

Test Cases

• Calculates correct values for a 6-column span on desktop @test
• Clamps a 10-column request on tablet to 8 columns (the maximum) @test
• Generates correct Flexbox width for a 4-column span on phone @test
• Returns safe CSS Grid span that doesn't exceed device limits @test

Implementation

@generates

API

// Returns the clamped span value (maximum of device columns)
// $requested-span: number - The desired column span
// $device: string - Device type ('desktop', 'tablet', or 'phone')
// Returns: number - Clamped span value
@function clamp-span($requested-span, $device) { }

// Calculates Flexbox width using calc(100% / columns * span - gutter)
// $span: number - The column span (should already be clamped)
// $device: string - Device type ('desktop', 'tablet', or 'phone')
// Returns: string - CSS calc() expression for width
@function get-flexbox-width($span, $device) { }

// Returns CSS Grid span value (minimum of span and device columns)
// $span: number - The column span
// $device: string - Device type ('desktop', 'tablet', or 'phone')
// Returns: number - Safe grid span value
@function get-grid-span($span, $device) { }

// Returns map with both Flexbox width and Grid span for a device
// $requested-span: number - The desired column span
// $device: string - Device type ('desktop', 'tablet', or 'phone')
// Returns: map - (flexbox-width: <calc-string>, grid-span: <number>)
@function calculate-cell-width($requested-span, $device) { }

Dependencies { .dependencies }

@material/layout-grid { .dependency }

Provides responsive grid layout system with column-based layouts across multiple device breakpoints.