PHPackages candygs/candy-grid-system - 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. [Utility & Helpers](/categories/utility) 4. / 5. candygs/candy-grid-system ActiveLibrary[Utility & Helpers](/categories/utility) candygs/candy-grid-system ========================= The simple and intuitive grid, configurable layout for your every need... Designed and optimized to improve the development of a website. You can choose for 12, 16 or 24 columns. v2.0.0(9y ago)4182[1 PRs](https://github.com/andreamariotti83/candy-grid-system/pulls)1MITCSS Since Sep 13Pushed 8y ago2 watchersCompare [ Source](https://github.com/andreamariotti83/candy-grid-system)[ Packagist](https://packagist.org/packages/candygs/candy-grid-system)[ Docs](http://candygridsystem.com)[ RSS](/packages/candygs-candy-grid-system/feed)WikiDiscussions master Synced 3w ago READMEChangelog (5)DependenciesVersions (5)Used By (1) Candy grid system ================= [](#candy-grid-system) Quick start ----------- [](#quick-start) - [Download the latest release](https://github.com/andreamariotti83/candy-grid-system/archive/v2.0.0.zip). - [Download dist css](https://github.com/andreamariotti83/candy-grid-system/releases/download/v2.0.0/candy-grid-system-2.0.0-dist.zip). - Clone the repo: `git clone https://github.com/andreamariotti83/candy-grid-system.git`. - Install with [Composer](https://getcomposer.org): `composer require candygs/candy-grid-system`. ### HTML: [](#html) To use the Grid, you need to include the file with Grid number **12**, **16** or **24** that you want to use in the section `` of the page. ``` ``` ``` ``` ``` ``` ***candygs*** : This class is required to use to set the values of the grids. ``` ``` ***fluid*** : This class is required to have a fluid layout, setting the width of the container to 100%. ``` ``` ***container*** : It has a default width for each resolution - 720px - 960px - 1200px - 1560px - 1920px ``` ``` It is possible to set a minimum width and / or maximum container - ***min-widht container*** : - ***min-sm*** : Set up a **min-width** to the container, which will be no smaller than 720px - ***min-md*** : Set up a **min-width** to the container, which will be no smaller than 960px - ***max-widht container*** : - ***max-sm*** : Set up a **max-width** to the container, which will be no larger than 720px - ***max-md*** : Set up a **max-width** to the container, which will be no larger than 960px - ***max-lg*** : Set up a **max-width** to the container, which will be no larger than 1200px - ***max-xl*** : Set up a **max-width** to the container, which will be no larger than 1560px ``` ``` Now you can set the grids depending on your needs. ``` ``` You can also choose different values, depending on the screen resolution. - ***grid-*** : For all resolutions - ***grid-xs-*** : Only for mobile `@media (max-width: 767px)` - ***grid-sm-*** : `@media (min-width: 768px)` - ***grid-md-*** : `@media (min-width: 992px)` - ***grid-lg-*** : `@media (min-width: 1200px)` - ***grid-xl-*** : `@media (min-width: 1560px)` - ***grid-xxl-*** : `@media (min-width: 1920px)` ``` ``` In additon to the class **grid-**, you can select: - **prefix-** - **suffix-** - **push-** - **pull-** Depending on your needs, choose the same variables as the **grid-**. ### LESS: [](#less) Coming soon ``` ``` ### SASS: [](#sass) Coming soon ``` ``` ### PSD: [](#psd) [Download psd templates](https://github.com/andreamariotti83/candy-grid-system/releases/download/v2.0.0/candy-grid-system-psd.zip). Author ------ [](#author) Created by Andrea Mariotti. See the official site for more info: - Copyright and license --------------------- [](#copyright-and-license) Code and documentation copyright 2016 Andrea Mariotti Code released under [the MIT license](https://github.com/andreamariotti83/candy-grid-system/blob/master/LICENSE). Thanks ------ [](#thanks) ### Health Score 31 — LowBetter than 66% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity12 Limited adoption so far Community14 Small or concentrated contributor base Maturity66 Established project with proven stability Bus Factor1 Top contributor holds 98.7% 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 ~9 days Total 4 Last Release 3546d ago Major Versions v1.3.0 → v2.0.02016-10-07 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/335017?v=4)[andreamariotti](/maintainers/andreamariotti)[@andreamariotti](https://github.com/andreamariotti) --- Top Contributors [![andreamariotti83](https://avatars.githubusercontent.com/u/7224675?v=4)](https://github.com/andreamariotti83 "andreamariotti83 (76 commits)")[![AndreaPezzo](https://avatars.githubusercontent.com/u/14937184?v=4)](https://github.com/AndreaPezzo "AndreaPezzo (1 commits)") --- Tags csssasslessgridresponsivefront-end ### Embed Badge ![Health badge](/badges/candygs-candy-grid-system/health.svg) ``` [![Health](https://phpackages.com/badges/candygs-candy-grid-system/health.svg)](https://phpackages.com/packages/candygs-candy-grid-system) ``` ### Alternatives [scssphp/scssphp scssphp is a compiler for SCSS written in PHP. 62929.3M290](/packages/scssphp-scssphp)[efficiently/larasset Larasset is a library for Laravel 5 which manage assets in an easy way. 684.8k](/packages/efficiently-larasset)[trentrichardson/cakephp-shrink Compiles, combines, and minifies javascript, coffee, less, scss, and css 1619.4k](/packages/trentrichardson-cakephp-shrink) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)