# phuocng/csslayout

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/phuocng-csslayout).**

8,060 stars · 517 forks · MDX · MIT

## Links

- GitHub: https://github.com/phuocng/csslayout
- Homepage: https://phuoc.ng/collection/css-layout
- awesome-repositories: https://awesome-repositories.com/repository/phuocng-csslayout.md

## Topics

`css` `css-grid` `flexbox` `flexbox-layout` `grid-layout` `reactjs` `typescript` `webpack`

## Description

CSS Layout is a pure CSS pattern library that provides pre-built layout components for common page structures, implemented entirely with CSS using flexbox and grid. The collection focuses on reusable, encapsulated components that handle overlapping elements, vertical centering, sticky footers, and classic page layouts without requiring any JavaScript for rendering or interactivity.

The library offers a range of practical layout implementations including centered navigation menus, element stacking techniques, holy grail page layouts, and responsive grid systems. Each pattern is built as a self-contained CSS component that can be independently reused and combined to assemble complete page structures, with the ability to customize component appearances to match specific project requirements.

The collection covers core CSS layout capabilities for building responsive web designs, including techniques for overlapping elements through absolute positioning or grid placement, vertical centering using flexbox alignment properties, and creating layouts that adapt to different screen sizes and container widths. The patterns are built on modern CSS foundations, avoiding older float-based approaches in favor of flexbox and grid as the primary positioning mechanisms.

## Tags

### Graphics & Multimedia

- [Flexbox and Grid Layouts](https://awesome-repositories.com/f/graphics-multimedia/web-standard-rendering/flexbox-and-grid-layouts.md) — Builds all layouts using CSS flexbox and grid as the primary positioning mechanisms, avoiding older float-based approaches.
- [Holy Grail Layouts](https://awesome-repositories.com/f/graphics-multimedia/web-standard-rendering/flexbox-and-grid-layouts/holy-grail-layouts.md) — Implements the classic holy grail page layout with header, footer, and three columns using CSS grid or flexbox.

### Software Engineering & Architecture

- [Encapsulated Layout Components](https://awesome-repositories.com/f/software-engineering-architecture/css-architecture-patterns/encapsulated-layout-components.md) — Provides encapsulated CSS layout components that can be independently reused and combined to assemble page structures.

### User Interface & Experience

- [CSS Component Libraries](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries.md) — Provides a collection of pre-built CSS layout components that can be reused and combined to assemble complete page structures.
- [CSS Pattern Libraries](https://awesome-repositories.com/f/user-interface-experience/css-pattern-libraries.md) — Provides a collection of reusable CSS layout patterns built with flexbox and grid for common page structures.
- [CSS Snippet Collections](https://awesome-repositories.com/f/user-interface-experience/css-snippet-collections.md) — Offers pre-built CSS components for common UI patterns without any framework dependencies.
- [Element Centering](https://awesome-repositories.com/f/user-interface-experience/element-centering.md) — Provides pure CSS patterns for centering elements both horizontally and vertically within their parent containers.
- [Element Stacking](https://awesome-repositories.com/f/user-interface-experience/element-stacking.md) — Provides element stacking techniques using absolute positioning or grid to place multiple elements in the same position. ([source](https://phuoc.ng/collection/css-layout))
- [Reusable Components](https://awesome-repositories.com/f/user-interface-experience/page-layout-templates/reusable-components.md) — Provides reusable CSS layout components that can be combined to assemble any desired page structure. ([source](https://cdn.jsdelivr.net/gh/phuocng/csslayout@master/README.md))
- [Responsive Design Patterns](https://awesome-repositories.com/f/user-interface-experience/responsive-design-patterns.md) — Provides responsive design patterns that adapt layouts to different screen sizes and container widths using modern CSS techniques.
- [Responsive Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-layouts.md) — Implements responsive grid layouts using CSS grid properties that adapt to container width.
- [Sticky](https://awesome-repositories.com/f/user-interface-experience/footers/sticky.md) — Provides a sticky footer mechanism using CSS flexbox or grid to keep the footer at the viewport bottom or push it down with content overflow.
- [Holy Grail Page Layouts](https://awesome-repositories.com/f/user-interface-experience/page-layout-frameworks/holy-grail-page-layouts.md) — Implements the holy grail page layout with header, footer, and three columns using CSS grid or flexbox. ([source](https://phuoc.ng/collection/css-layout))

### Web Development

- [Overlay Positioning](https://awesome-repositories.com/f/web-development/css-alignment-techniques/overlay-positioning.md) — Provides CSS-only overlay positioning techniques using absolute positioning and grid for stacking elements.
- [CSS Layout Patterns](https://awesome-repositories.com/f/web-development/css-layout-patterns.md) — Provides pure CSS layout patterns built with modern CSS features like flexbox and grid without any framework dependencies. ([source](https://cdn.jsdelivr.net/gh/phuocng/csslayout@master/README.md))
- [Holy Grail Layouts](https://awesome-repositories.com/f/web-development/css-layout-patterns/holy-grail-layouts.md) — Ships a pre-built holy grail layout component using CSS grid and flexbox for classic page structures.
- [Flexbox Layout Patterns](https://awesome-repositories.com/f/web-development/flexbox-layout-patterns.md) — Delivers reusable flexbox patterns for centering, menus, sticky footers, and page structures.
- [Customizable Layout Components](https://awesome-repositories.com/f/web-development/css-development-utilities/css-only-ui-components/customizable-layout-components.md) — Provides pre-built CSS layout components that can be customized in appearance to match specific project requirements. ([source](https://cdn.jsdelivr.net/gh/phuocng/csslayout@master/README.md))

### Mobile Development

- [Centered Navigation Menus](https://awesome-repositories.com/f/mobile-development/mobile-app-routers/navigation-menu-styling/centered-navigation-menus.md) — Provides a centered navigation menu pattern that aligns links horizontally with equal spacing using CSS. ([source](https://phuoc.ng/collection/css-layout))