skills.rest
Legal-and-General
Legal-and-GeneralOFFICIAL
Explore all skills by this author →
Website𝕏@landg_groupGitHub

canopy-spacing-row-gap

Apply the Canopy lgRowGap directive to standardize row-gap spacing in Angular grid and flex layouts.

23|46|Updated Sep 7, 2020
Search Tags:#angular#spacing#grid#directive#flex#canopy#row-gap
One-click install
npx skills add https://github.com/Legal-and-General/canopy --skill canopy-spacing-row-gap
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canopy-spacing-row-gap
Source: https://github.com/Legal-and-General/canopy/tree/main/skills/best-practice/spacing-row-gap
Command: npx skills add https://github.com/Legal-and-General/canopy --skill canopy-spacing-row-gap

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Aligns Canopy-based row-gap spacing across flex and grid layouts to ensure consistent visual rhythm and reduce custom CSS.

Core Features & Use Cases

  • Standardizes row-gap usage by applying the lgRowGap directive from Canopy on containers.
  • Supports Canopy spacing variants none, 1–12 for predictable alignment in responsive layouts.
  • Use Case: Apply uniform row gaps in dashboards built with Canopy grid and flex components.

Quick Start

Apply the Canopy lgRowGap directive with a spacing variant on a flex or grid container to enforce consistent row gaps.

Frequently Asked Questions about canopy-spacing-row-gap

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

FAQPage Schema
How do I apply consistent row-gap spacing in Angular grid or flex layouts?▼

Apply consistent row-gap spacing in Angular layouts by using the Canopy lgRowGap directive on flex or grid containers, selecting from predefined spacing variants none and 1 through 12 to enforce visual rhythm without custom CSS.

What is the best way to standardize row gaps across Canopy components?▼

Standardize row gaps across Canopy components by applying the lgRowGap directive to layout containers, which enforces predefined spacing variants and eliminates the need for custom CSS spacing rules.

Can I use custom CSS for row gaps instead of the Canopy lgRowGap directive?▼

Using custom CSS for row gaps is discouraged; the lgRowGap directive enforces Canopy spacing variants none and 1 through 12 to maintain predictable alignment and consistent visual rhythm across responsive layouts.

Does the lgRowGap directive support both flex and grid containers in Angular?▼

The lgRowGap directive supports both flex and grid containers in Angular projects, applying standardized Canopy spacing variants to maintain uniform row gaps across different layout types.

What spacing values are available for the Canopy row-gap directive?▼

The Canopy row-gap directive supports spacing variants none and 1 through 12, providing predictable alignment options for responsive dashboards and layouts built with Canopy grid and flex components.

Related Skills

Explore More Software Engineering Skills→
Legal-and-GeneralLegal-and-General
23

canopy-grid

Enforce Canopy grid directive order and responsive breakpoint usage in Angular components.

Official
Intermediate
kurokeitakurokeita
1

web-design-guidelines

Audit UI components and layouts against Web Interface Guidelines compliance.

Community
Intermediate
HieubkavHieubkav

Frontend Components

Design reusable UI components with explicit props and documented APIs.

Community
Basic
Legal-and-GeneralLegal-and-General
23

canopy-layout-grid-and-spacing

Implement Canopy's responsive layout grid and spacing system in Angular projects.

Official
Intermediate