skills.rest
jpoindexter
jpoindexterCOMMUNITY
Explore all skills by this author →
Website𝕏@microninkGitHub

grid-and-spacing

Guide grid and spacing systems with 8pt scales and CSS Grid/Flexbox.

1|Updated Jun 9, 2026
Search Tags:#responsive design#design system#Flexbox#CSS Grid#grid systems#spacing scales
One-click install
npx skills add https://github.com/jpoindexter/design-and-ai-skills --skill grid-and-spacing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: grid-and-spacing
Source: https://github.com/jpoindexter/design-and-ai-skills/tree/main/design-system-skills/grid-and-spacing
Command: npx skills add https://github.com/jpoindexter/design-and-ai-skills --skill grid-and-spacing

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive reference for grid and spacing systems, ensuring consistent and precise design layouts across different platforms and devices.

Core Features & Use Cases

  • Grid Systems: Offers detailed guidance on soft, hard, and baseline grids for layout design.
  • Spacing Scale: Provides a geometric scale for spacing tokens on an 8pt grid.
  • Responsive Breakpoints: Defines responsive breakpoints for mobile-first design.
  • CSS Grid & Flexbox: Offers implementation strategies using CSS Grid and Flexbox.
  • Density and Units: Explains how to design and apply units across different platforms.
  • Applying Spacing: Provides patterns for applying spacing in various design scenarios.
  • Use Case: A designer can use this Skill to create a consistent and responsive design system for a new web application.

Quick Start

Use the grid-and-spacing skill to implement a responsive 12-column grid system for your web design.

Frequently Asked Questions about grid-and-spacing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a responsive 12-column grid system for web design?▼

To create a responsive 12-column grid system, use mobile-first breakpoints combined with CSS Grid or Flexbox implementation strategies. This ensures consistent layout structures that adapt smoothly across different screen sizes and devices.

What is the difference between soft, hard, and baseline grids?▼

Soft, hard, and baseline grids are layout structures that define visual rhythm differently. Soft grids use loose alignment, hard grids enforce strict column boundaries, and baseline grids align elements to horizontal text lines for consistent vertical spacing.

How do I apply an 8pt spacing scale across different platforms?▼

Apply an 8pt spacing scale by using platform-specific units mapped to a geometric scale of spacing tokens. This approach ensures density and spacing remain consistent when designing across different platforms and devices.

When should I use CSS Grid vs Flexbox for responsive layouts?▼

Use CSS Grid for two-dimensional layout structures and Flexbox for one-dimensional alignment within those structures. This Skill provides implementation strategies for both, allowing you to combine them for complex responsive patterns.

Can I use this grid system approach for mobile-first design?▼

Yes, this grid system approach supports mobile-first design by defining responsive breakpoints that scale up from base mobile screens. It provides specific patterns for applying density and units across different platform contexts.

Related Skills

Explore More Design & Creative Skills→
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
johnnyelwailerjohnnyelwailer

figma-to-code

Convert Figma designs into React components with token-based styling.

Community
Intermediate
BarisSozenBarisSozen
1

apple-ui-design

Generate Apple-inspired UI design guidelines with typography, color, and spacing tokens.

Community
Basic
JaylaelikeJaylaelike

tailwind-design-system

Build scalable Tailwind v4 design systems with tokens and responsive patterns.

Community
Intermediate