# phuocng/csslayout

A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing!

Repository: https://github.com/phuocng/csslayout
Canonical: https://ross.abutalabs.com/products/csslayout
Homepage: https://phuoc.ng/collection/css-layout
Language: MDX
License: MIT
License Family: permissive
Topics: css-grid, flexbox, css, flexbox-layout, grid-layout, reactjs, typescript, webpack
Last push: 2023-11-22T14:23:17+00:00

## Health v2 (maintenance only)
Score: 32/100 (v2, computed 2026-09-02T17:46:02.011165+00:00)
- activity 0, release rhythm 35, longevity 100
- inputs: {"age_days": 2483, "days_push": 1015, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: no_releases
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 8045, forks 514 (observed 2026-08-28T04:10:12.181278+00:00)

## What it is
A curated collection of 100+ popular layouts and component patterns built with pure CSS using modern features like flexbox and grid. It is a reference site with zero dependencies and no framework requirements, letting developers copy and customize patterns directly.

## Use cases
- find a CSS pattern for a centered card layout
- learn how to build common layouts with flexbox and grid
- copy a pure-CSS component without pulling in a framework
- reference modern CSS layout techniques for a project
- build a responsive sidebar or header layout from scratch
- avoid heavy CSS frameworks by using small standalone patterns

## When to choose
- you want dependency-free, framework-agnostic CSS layout snippets
- you are learning or teaching modern CSS flexbox and grid techniques
- you need a quick reference for common UI layout patterns

## When to avoid
- you need a full CSS framework with design tokens and theming
- you want prebuilt React/Vue components rather than raw CSS patterns
- you need actively maintained, frequently updated code

## Facets
- artifact type: learning-resource
- maturity: maintenance
- function: css-framework, ui-components, templating, documentation
- domain: web-development, frontend, web-design, tutorials
- platform: cross-platform, browser
- tags: css-layouts, css-patterns, flexbox, css-grid, pure-css, frontend-patterns, code-snippets, web-server

## Member repositories
- phuocng/csslayout (main) score 32

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:10:12.181278+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-29T17:31:25.221655+00:00, confidence not recorded.
  - readme: https://github.com/phuocng/csslayout (fetched 2026-08-28T04:10:12.181278+00:00, sha 8b5dd30a1da8)
- Data as of 2026-08-30T08:39:29.467469+00:00.