flexboxgrid
Grid based on CSS3 flexbox
A lightweight CSS stylesheet that gives you a ready-made, responsive grid system based on flexbox, add a class to your HTML and your layout snaps into rows and columns at any screen size.
Flexboxgrid is a CSS grid system built on the flexbox layout model, a CSS feature that controls how elements are arranged and sized within a container. Grid systems give web developers a structured way to divide a page into rows and columns, with content that adjusts at different screen widths. Instead of writing custom layout rules from scratch every time, developers add pre-defined CSS classes to their HTML elements and get consistent, column-based layouts right away.
Flexbox, which this library is built on, handles spacing and alignment more predictably than older layout methods like floats. Flexboxgrid packages that technology into a simple, class-based grid, similar in approach to the grid found in widely-used CSS frameworks.
The library is a single stylesheet with no JavaScript or other dependencies. It can be added to a project through npm, Bower, or a CDN link, or by downloading the CSS file directly and linking it in an HTML page. Both a development version and a minified production version are provided.
The README is brief and focused on installation options. Further documentation and a live demo of the grid system are available on the project's website at flexboxgrid.com. The repository also lists several open-source grid experiments that served as inspiration during development.
Where it fits
- Add a responsive column-based layout to any HTML page by linking a single CSS file.
- Replace custom float or grid CSS with pre-built flexbox classes that handle alignment automatically.
- Prototype a multi-column web design quickly without writing any layout code from scratch.