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

canopy-grid

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Canopy Grid best practices help teams implement responsive, consistent grid layouts by guiding the correct use of the lgContainer, lgRow, and lgCol directives, reducing layout bugs and improving accessibility across devices.

Core Features & Use Cases

  • Provides a clear, documented pattern for composing grid layouts using Canopy directives.
  • Covers typical responsive scenarios (mobile-first to larger breakpoints) and enforces the 3-directive stacking order for predictable behavior.
  • Use Case: When building a two-column dashboard, apply lgContainer, then a single lgRow, and two lgCol elements with appropriate spans at md and lg breakpoints.

Quick Start

Apply lgContainer, lgRow, and lgCol in your component template to establish a responsive grid for Canopy components.

Frequently Asked Questions about canopy-grid

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

FAQPage Schema
What is the best way to structure responsive grid layouts in Angular using Canopy directives?▼

The best way to structure responsive grid layouts in Angular is using the lgContainer, lgRow, and lgCol directives. This standardized pattern enforces a 3-directive stacking order to ensure predictable rendering and improve accessibility across mobile and desktop breakpoints.

How do I build a two-column dashboard layout with Canopy grid directives?▼

To build a two-column dashboard, apply the lgContainer directive to wrap a single lgRow, then place two lgCol elements inside. Configure appropriate column spans at md and lg breakpoints to ensure the dashboard responds correctly across different screen sizes.

Why does my Canopy grid layout break on mobile screens?▼

Your Canopy grid layout likely breaks because of incorrect directive order or missing responsive breakpoints. Enforcing the proper lgContainer, lgRow, and lgCol stacking order and applying mobile-first breakpoint spans ensures predictable layout behavior across all devices.

Do I need to use lgContainer, lgRow, and lgCol together for Canopy grids?▼

Yes, you need to use lgContainer, lgRow, and lgCol together. Canopy grid best practices enforce this specific 3-directive stacking order to maintain layout consistency, reduce layout bugs, and ensure predictable responsive behavior across Canopy projects.

Related Skills

Explore More Software Engineering Skills→
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
Legal-and-GeneralLegal-and-General
23

canopy-spacing-padding

Apply Canopy lgPadding directive for breakpoint-aware spacing in Angular projects.

Official
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-page

Guide Angular developers to implement full-page layouts with the Canopy lg-page component.

Official
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-spacing-row-gap

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

Official
Basic