PHPackages bk2k/autogrids - 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. bk2k/autogrids ActiveTypo3-cms-extension[Utility & Helpers](/categories/utility) bk2k/autogrids ============== 1.0.2(7y ago)108561[3 issues](https://github.com/benjaminkott/autogrids/issues)GPL-2.0-or-laterPHPPHP >=7.0.0 Since Jan 11Pushed 6y ago7 watchersCompare [ Source](https://github.com/benjaminkott/autogrids)[ Packagist](https://packagist.org/packages/bk2k/autogrids)[ Docs](https://github.com/benjaminkott/autogrids)[ RSS](/packages/bk2k-autogrids/feed)WikiDiscussions master Synced 2mo ago READMEChangelog (3)Dependencies (5)Versions (3)Used By (0) Automatic Grids =============== [](#automatic-grids) This is a configuration extension for Grid Elements. It provides a clean configuration for Grid Elements to be compliant with TYPO3 Core Best-Practices. Installation ------------ [](#installation) 1. `composer require bk2k/autogrids`. 2. Install Extension in Extension Manager. 3. Remove `EXT:gridelements` Static Template! 4. Include `EXT:autogrids` Static Template. What does it do? ---------------- [](#what-does-it-do) - It respects your `lib.contentElement` configuration. - It gives you the freedom to define the behaviour yourself. - It delivers streamlined markup. - It delivers easy to understand templates. What does it not do? -------------------- [](#what-does-it-not-do) - It does not deliver responsive grids out of the box! What does it generate? ---------------------- [](#what-does-it-generate) ### Grid-Elements TsConfig Configuration [](#grid-elements-tsconfig-configuration) ``` tx_gridelements.setup { twocolumns { title = LLL:EXT:autogrids/Resources/Private/Language/locallang_be.xlf:layout.twocolumns.title description = LLL:EXT:autogrids/Resources/Private/Language/locallang_be.xlf:layout.twocolumns.description topLevelLayout = 0 config { colCount = 2 rowCount = 1 rows { 1 { columns { 1 { name = LLL:EXT:autogrids/Resources/Private/Language/locallang_be.xlf:column.1 colPos = 101 } 2 { name = LLL:EXT:autogrids/Resources/Private/Language/locallang_be.xlf:column.2 colPos = 102 } } } } } } } ``` ### HTML [](#html) ``` ... ... ``` How does it work? ----------------- [](#how-does-it-work) The only css added to the instance is a simple flexbox container and a column config that ensures that all elements are rendered with the same with. ``` .grid-row { display: flex; } .grid-column { flex-grow: 1; flex-basis: 0; } ``` How do i make the grid responsive? ---------------------------------- [](#how-do-i-make-the-grid-responsive) You just add the css that makes the grid behave as you want it to. ### Unset default CSS [](#unset-default-css) ``` page.includeCSSLibs.autogrids > ``` ### Example CSS [](#example-css) ``` .grid-row { display: flex; flex-wrap: wrap; margin-right: -20px; margin-left: -20px; } .grid-column { width: 100%; padding-right: 20px; padding-left: 20px; } @media (min-width: 576px) { .grid-container-fourcolumns > .grid-row > .grid-column { width: calc(100% / 2); } } @media (min-width: 992px) { .grid-container-fourcolumns > .grid-row > .grid-column { width: calc(100% / 4); } } ``` ### Health Score 29 — LowBetter than 60% of packages Maintenance14 Infrequent updates — may be unmaintained Popularity21 Limited adoption so far Community13 Small or concentrated contributor base Maturity57 Maturing project, gaining track record Bus Factor1 Top contributor holds 80% 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 ~31 days Total 3 Last Release 2614d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/3243119?v=4)[Benjamin Kott](/maintainers/benjaminkott)[@benjaminkott](https://github.com/benjaminkott) --- Top Contributors [![benjaminkott](https://avatars.githubusercontent.com/u/3243119?v=4)](https://github.com/benjaminkott "benjaminkott (4 commits)")[![silversight](https://avatars.githubusercontent.com/u/15649601?v=4)](https://github.com/silversight "silversight (1 commits)") --- Tags gridelementstypo3typo3-cms-extensionextensionTYPO3 CMS ### Code Quality Code StylePHP CS Fixer ### Embed Badge ![Health badge](/badges/bk2k-autogrids/health.svg) ``` [![Health](https://phpackages.com/badges/bk2k-autogrids/health.svg)](https://phpackages.com/packages/bk2k-autogrids) ``` ### Alternatives [fluidtypo3/flux The flux package from FluidTYPO3 152982.2k20](/packages/fluidtypo3-flux)[friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 96374.6k23](/packages/friendsoftypo3-content-blocks)[brotkrueml/schema Embedding schema.org vocabulary - API and view helpers for schema.org markup 33584.6k13](/packages/brotkrueml-schema)[typo3-themes/themes TYPO3 THEMES 3642.6k2](/packages/typo3-themes-themes)[ichhabrecht/core-upgrader Run upgrade wizards for multiple TYPO3 versions at once 2732.0k](/packages/ichhabrecht-core-upgrader)[eliashaeussler/typo3-form-consent Extension for TYPO3 CMS that adds double opt-in functionality to EXT:form 1481.0k](/packages/eliashaeussler-typo3-form-consent) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)