# kristoferjoseph/flexboxgrid

**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/kristoferjoseph-flexboxgrid).**

9,318 stars · 1,099 forks · HTML · NOASSERTION

## Links

- GitHub: https://github.com/kristoferjoseph/flexboxgrid
- Homepage: http://flexboxgrid.com
- awesome-repositories: https://awesome-repositories.com/repository/kristoferjoseph-flexboxgrid.md

## Description

Flexboxgrid is a responsive CSS framework and layout engine based on CSS3 standards. It provides a grid system that uses the flexbox model to arrange page elements into flexible, proportional grids that adapt to different screen sizes and device resolutions.

The framework implements a float-free responsive design, utilizing a media-query breakpoint system to adjust layouts and column counts based on viewport width. It employs percentage-based column sizing and negative-margin guttering to maintain consistent spacing and fluid scaling across various displays.

The system maps layout configurations to specific CSS classes, allowing for the structural alignment of content into proportional columns and rows.

## Tags

### User Interface & Experience

- [Responsive Grid Systems](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-systems.md) — Provides a responsive grid system that arranges page elements into flexible proportional layouts. ([source](https://github.com/kristoferjoseph/flexboxgrid/blob/master/CNAME))
- [Flexible Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/flexible-grid-layouts.md) — Organizes website content into proportional columns and rows that scale based on the viewport width.
- [Fluid Percentage Grids](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/windowed-grids/fluid-percentage-grids.md) — Defines grid widths using relative percentages to ensure fluid scaling across various device resolutions.
- [Responsive Breakpoints](https://awesome-repositories.com/f/user-interface-experience/responsive-breakpoints.md) — Utilizes a system of media query breakpoints to automatically adjust grid layouts across different viewport widths.
- [Flexbox-Based Grid Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/flexbox-based-grid-systems.md) — Implements a responsive layout engine based on the CSS flexbox model for alignment and distribution.
- [Float-Free Layouts](https://awesome-repositories.com/f/user-interface-experience/float-free-layouts.md) — Eliminates traditional float-based grids by leveraging the modern flexbox model for structural alignment.
- [Gutter Management](https://awesome-repositories.com/f/user-interface-experience/gutter-management.md) — Employs negative-margin guttering to maintain consistent spacing between fluid grid columns.
- [Responsive Design Patterns](https://awesome-repositories.com/f/user-interface-experience/responsive-design-patterns.md) — Implements layout strategies that automatically adjust structure and element sizes for different screen dimensions.
- [Grid Class Mappings](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-class-based-styling/class-name-annotations/semantic-class-mapping/grid-class-mappings.md) — Provides a set of CSS classes that map specific layout configurations to grid elements for rapid implementation.

### Web Development

- [Responsive CSS Frameworks](https://awesome-repositories.com/f/web-development/web-standards/responsive-css-frameworks.md) — Offers a collection of styles designed for mobile-first, responsive interface development.
- [Layout Engines](https://awesome-repositories.com/f/web-development/layout-engines.md) — Implements a lightweight grid system based on CSS3 standards for consistent structural alignment.

### Part of an Awesome List

- [Data Tables](https://awesome-repositories.com/f/awesome-lists/data/data-tables.md) — Grid system based on CSS3 flexbox.
- [Grid Systems](https://awesome-repositories.com/f/awesome-lists/devtools/grid-systems.md) — Implements a grid system utilizing the modern flexbox display property.
- [Layout Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/layout-frameworks.md) — A responsive grid system based on flexbox.