PHPackages kenangundogan/flexiblegrid - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Framework](/categories/framework) 4. / 5. kenangundogan/flexiblegrid ActiveLibrary[Framework](/categories/framework) kenangundogan/flexiblegrid ========================== For users who can embrace the newest of technology, Flexiblegrid comes with an flex based grid. It’s the same grid you know and love, but with even better source ordering and alignment options. v1.2.0(8y ago)15513211MITCSS Since Oct 25Pushed 7y ago17 watchersCompare [ Source](https://github.com/kenangundogan/flexible-grid)[ Packagist](https://packagist.org/packages/kenangundogan/flexiblegrid)[ Docs](http://www.flexible-grid.com/)[ RSS](/packages/kenangundogan-flexiblegrid/feed)WikiDiscussions master Synced 2w ago READMEChangelogDependencies (1)Versions (4)Used By (1) [ ![](https://camo.githubusercontent.com/a6d99ba12d0de7dd3c3ed2583210350670022ff506ffc474b20a03e963e43163/687474703a2f2f666c657869626c652d677269642e636f6d2f6173736574732f696d616765732f6c6f676f2f6c6f676f2d73796d626f6c2d677265656e2e737667) ![](https://camo.githubusercontent.com/4ec64b83be0809bb284fa5a4495ec31fb2fccb4768811875ed58e0d8db337d29/687474703a2f2f666c657869626c652d677269642e636f6d2f6173736574732f696d616765732f6c6f676f2f6c6f676f2d677265656e2e737667) ](http://flexible-grid.com) For users who can embrace the newest of technology, Flexiblegrid comes with an flex based grid. It’s the same grid you know and love, but with even better source ordering and alignment options. [**FlexibleGrid docs**](http://www.flexible-grid.com/documentation) · [**FlexibleGrid inst**](http://www.flexible-grid.com/installation) · [**FlexibleGrid example**](http://flexible-grid.com/flexible-grid) · [**FlexibleGrid sample**](http://flexible-grid.com/examples) [ ![npm](https://camo.githubusercontent.com/08add176fe60b298614dff3f39e85122895b0845e9092dce93cc482a9b7e865e/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f666c657869626c65677269642e7376673f7374796c653d666c6174) ](https://www.npmjs.org/package/flexiblegrid) Flexible Grid Components ------------------------ [](#flexible-grid-components) 1. [Wrapper](#flex) 2. [Direction](#flex-direction) 3. [Wrap](#flex-wrap) 4. [Justify Content](#flex-justify-content) 5. [Align Items](#flex-align-items) 6. [Align Self](#flex-align-self) 7. [Align Content](#flex-align-content) 8. [Auto Margin](#flex-margin-auto) 9. [Order](#flex-order) Quick start ----------- [](#quick-start) [![Build Status](https://camo.githubusercontent.com/017b5876406033b5743bab7f7ea4bbd73532b640e9639d514dd8c1386c9e30ed/68747470733a2f2f7472617669732d63692e6f72672f6b656e616e67756e646f67616e2f666c657869626c652d677269642e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/kenangundogan/flexible-grid) [![npm version](https://camo.githubusercontent.com/0ca6c85898c7f60f7747e0e802d6bb32adddf37e2efc5bde8cbb6f3486f03d21/68747470733a2f2f62616467652e667572792e696f2f6a732f666c657869626c65677269642e737667)](https://badge.fury.io/js/flexiblegrid) [![Bower version](https://camo.githubusercontent.com/c6448a06c5604ccd332eedf099012a2f6852448e7d7d46a9ee3f8e45d52cdf62/68747470733a2f2f62616467652e667572792e696f2f626f2f666c657869626c65677269642e737667)](https://badge.fury.io/bo/flexiblegrid) [![PHP version](https://camo.githubusercontent.com/b71e5a7f5b0f87b944d88676f84b75904506d3c0fbb79f1735c64c14b8c0c764/68747470733a2f2f62616467652e667572792e696f2f70682f6b656e616e67756e646f67616e253246666c657869626c65677269642e737667)](https://badge.fury.io/ph/kenangundogan%2Fflexiblegrid) [![Meteor Atmosphere](https://camo.githubusercontent.com/3f4d7072867791c7faa8bf33b5b6cd1ccfda88dc7722b7ca3cd936d43473f5a9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d6574656f722d6b656e616e67756e646f67616e2f666c657869626c65677269642d626c75652e737667)](https://atmospherejs.com/kenangundogan/flexiblegrid) [![Gem Version](https://camo.githubusercontent.com/57221309f0c0c76fb7424f9491784023fec3bbe09bce2502534736e429891bcd/68747470733a2f2f62616467652e667572792e696f2f72622f666c657869626c652d677269642e737667)](https://badge.fury.io/rb/flexible-grid)[![CSS gzip size](https://camo.githubusercontent.com/e95deb0535e0a0cba9face5849755d5278de23c13db5a46ca8ad47908cc03e59/687474703a2f2f696d672e626164676573697a652e696f2f6b656e616e67756e646f67616e2f666c657869626c652d677269642f6d61737465722f646973742f6373732f666c657869626c652d677269642e6d696e2e6373733f636f6d7072657373696f6e3d677a6970266c6162656c3d4353532b677a69702b73697a65)](https://github.com/kenangundogan/flexible-grid/master/dist/css/flexible-grid.min.css) - [Download the latest release.](http://flexible-grid.com/flexible-grid-compiled.zip) - Clone the repo: `git clone https://github.com/kenangundogan/flexible-grid.git` - Install with [npm](https://www.npmjs.com/package/flexiblegrid): `npm install flexiblegrid` - Install with [bower](https://bower.io): `bower install flexiblegrid` - Install with [composer](https://packagist.org/packages/kenangundogan/flexiblegrid): `composer require kenangundogan/flexiblegrid` - Install with [yarn](https://yarnpkg.com/en/package/flexiblegrid): `yarn add flexiblegrid` - Install with [meteor](https://atmospherejs.com/kenangundogan/flexiblegrid): `meteor add kenangundogan:flexiblegrid` - Install with [rubygems](https://rubygems.org/gems/flexible-grid): `gem install flexible-grid` Read the [Getting started page](http://flexible-grid.com/documentation) for information on the framework contents, templates and examples, and more. What's included --------------- [](#whats-included) Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. #### Outuput File [](#outuput-file) ``` flexible-grid/ ├── css/ ├── flexible-grid.css ├── flexible-grid.css.map ├── flexible-grid.min.css └── flexible-grid.min.css.map ``` #### Source File [](#source-file) ``` flexible-grid/ ├── scss/ ├── flexible-grid.scss ├── _variables.scss ├── _definitions.scss ├── _array-list.scss ├── _wrapper.scss ├── _grid.scss ├── _attribute.scss └── _normalize.scss ``` Versioning ---------- [](#versioning) Flexible Grid will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format: ``` .. ``` For more information on SemVer, please visit . Flexible Grid, Item Screen Size (-xs -sm -md -lg -xl) ----------------------------------------------------- [](#flexible-grid-item-screen-size--xs--sm--md--lg--xl) Media Screen Size< 424px< 768px< 1024px< 1279px< 1366pxcolumn.xs-1.sm-1.md-1.lg-1.xl-1column.xs-2.sm-2.md-2.lg-2.xl-2column.xs-3.sm-3.md-3.lg-3.xl-3column.xs-4.sm-4.md-4.lg-4.xl-4column.xs-5.sm-5.md-5.lg-5.xl-5column.xs-6.sm-6.md-6.lg-6.xl-6column.xs-7.sm-7.md-7.lg-7.xl-7column.xs-8.sm-8.md-8.lg-8.xl-8column.xs-9.sm-9.md-9.lg-9.xl-9column.xs-10.sm-10.md-10.lg-10.xl-10column.xs-11.sm-11.md-11.lg-11.xl-11column.xs-12.sm-12.md-12.lg-12.xl-12Flexible Grid, Attribute Screen Size (-xs -sm -md -lg -xl) ---------------------------------------------------------- [](#flexible-grid-attribute-screen-size--xs--sm--md--lg--xl) Media Screen Size< 424px< 768px< 1024px< 1279px< 1366px.display-flex-xs-sm-md-lg-xl.display-inline-flex-xs-sm-md-lg-xl.flex-d-row-xs-sm-md-lg-xl.flex-d-rowreverse-xs-sm-md-lg-xl.flex-d-column-xs-sm-md-lg-xl.flex-d-column-reverse-xs-sm-md-lg-xl.flex-wrap-xs-sm-md-lg-xl.flex-wrap-reverse-xs-sm-md-lg-xl.flex-nowrap-xs-sm-md-lg-xl.justify-content-start-xs-sm-md-lg-xl.justify-content-end-xs-sm-md-lg-xl.justify-content-center-xs-sm-md-lg-xl.justify-content-baseline-xs-sm-md-lg-xl.justify-content-arround-xs-sm-md-lg-xl.justify-content-between-xs-sm-md-lg-xl.align-items-start-xs-sm-md-lg-xl.align-items-end-xs-sm-md-lg-xl.align-items-center-xs-sm-md-lg-xl.align-items-baseline-xs-sm-md-lg-xl.align-items-stretch-xs-sm-md-lg-xl.align-selft-start-xs-sm-md-lg-xl.align-selft-end-xs-sm-md-lg-xl.align-selft-center-xs-sm-md-lg-xl.align-selft-baseline-xs-sm-md-lg-xl.align-selft-stretch-xs-sm-md-lg-xl.align-content-start-xs-sm-md-lg-xl.align-content-end-xs-sm-md-lg-xl.align-content-center-xs-sm-md-lg-xl.align-content-between-xs-sm-md-lg-xl.align-content-around-xs-sm-md-lg-xl.flex-order-first-xs-sm-md-lg-xl.flex-order-last-xs-sm-md-lg-xl.flex-order-unordered-xs-sm-md-lg-xl.flex-ml-auto-xs-sm-md-lg-xl.flex-mr-auto-xs-sm-md-lg-xl.flex-mt-auto-xs-sm-md-lg-xl.flex-mb-auto-xs-sm-md-lg-xlBrowser support --------------- [](#browser-support) - Google Chrome - Opera - Firefox - Safari 6.2+ - Internet Explorer 10+ - iOS 7+ - Android 4.4+ - Windows Phone 8.1+ Copyright and license --------------------- [](#copyright-and-license) Designed and built by @kenangundogan 2017 Currently - Code licensed [MIT License](https://github.com/kenangundogan/flexible-grid/blob/master/LICENSE) ### Health Score 34 — LowBetter than 75% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity23 Limited adoption so far Community18 Small or concentrated contributor base Maturity65 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 2 Last Release 3169d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/19374764?v=4)[Kenan Gündoğan](/maintainers/kenangundogan)[@kenangundogan](https://github.com/kenangundogan) --- Top Contributors [![kenangundogan](https://avatars.githubusercontent.com/u/19374764?v=4)](https://github.com/kenangundogan "kenangundogan (81 commits)") --- Tags csscss-frameworkflexflexboxflexbox-gridflexibleflexible-gridgridhtmlsassscssframeworkcsshtmlsassscssgridflexresponsiveFlexibleflexboxflex-frameworkflexgrid ### Embed Badge ![Health badge](/badges/kenangundogan-flexiblegrid/health.svg) ``` [![Health](https://phpackages.com/badges/kenangundogan-flexiblegrid/health.svg)](https://phpackages.com/packages/kenangundogan-flexiblegrid) ``` ### Alternatives [twbs/bootstrap The most popular front-end framework for developing responsive, mobile first projects on the web. 174.3k18.2M373](/packages/twbs-bootstrap)[twitter/bootstrap The most popular front-end framework for developing responsive, mobile first projects on the web. 174.4k1.7M28](/packages/twitter-bootstrap)[zurb/foundation The most advanced responsive front-end framework in the world. 29.8k389.7k17](/packages/zurb-foundation)[foundation/foundation-sites The most advanced responsive front-end framework in the world. 29.8k8.8k](/packages/foundation-foundation-sites)[coreui/coreui The most popular front-end framework for developing responsive, mobile-first projects on the web rewritten and maintain by the CoreUI Team 878117.2k4](/packages/coreui-coreui)[components/bootstrap The most popular front-end framework for developing responsive, mobile first projects on the web. 802.8M63](/packages/components-bootstrap) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)