PHPackages                             hypejunction/ui\_grid - 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. hypejunction/ui\_grid

ActiveElgg-plugin[Utility & Helpers](/categories/utility)

hypejunction/ui\_grid
=====================

Responsive CSS grid system for Elgg

7.0.0(1mo ago)047GPL-2.0-or-laterCSSPHP >=8.3CI failing

Since Nov 29Pushed 2w ago1 watchersCompare

[ Source](https://github.com/hypeJunction/Elgg-ui_grid)[ Packagist](https://packagist.org/packages/hypejunction/ui_grid)[ Docs](https://github.com/hypeJunction/Elgg-ui_grid)[ RSS](/packages/hypejunction-ui-grid/feed)WikiDiscussions main Synced 4w ago

READMEChangelog (1)Dependencies (3)Versions (14)Used By (0)

Responsive Grid for Elgg
========================

[](#responsive-grid-for-elgg)

[![Elgg 7.x](https://camo.githubusercontent.com/959475d1d91761b2e3ed85398ae1ebe9536a48c724e92bef53e7e2027c3d3627/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f456c67672d372e782d6f72616e67652e7376673f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/959475d1d91761b2e3ed85398ae1ebe9536a48c724e92bef53e7e2027c3d3627/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f456c67672d372e782d6f72616e67652e7376673f7374796c653d666c61742d737175617265)

Features
--------

[](#features)

- Mobile-first responsive grid system
- Built with Compass and Susy

[![Spans](https://camo.githubusercontent.com/25e7f397e0ddd8507bfe7e0de138b8b76ba027a8fa851f6ef6d44bbb8859f6e2/68747470733a2f2f7261772e6769746875622e636f6d2f687970654a756e6374696f6e2f456c67672d75695f677269642f6d61737465722f73637265656e73686f74732f7370616e2e706e67 "Spans")](https://camo.githubusercontent.com/25e7f397e0ddd8507bfe7e0de138b8b76ba027a8fa851f6ef6d44bbb8859f6e2/68747470733a2f2f7261772e6769746875622e636f6d2f687970654a756e6374696f6e2f456c67672d75695f677269642f6d61737465722f73637265656e73686f74732f7370616e2e706e67)[![Columns](https://camo.githubusercontent.com/81e1d933edee9c76a9ef207b677b7153abb8d0e0d86f585d42740822b7c4c022/68747470733a2f2f7261772e6769746875622e636f6d2f687970654a756e6374696f6e2f456c67672d75695f677269642f6d61737465722f73637265656e73686f74732f636f6c756d6e732e706e67 "Columns")](https://camo.githubusercontent.com/81e1d933edee9c76a9ef207b677b7153abb8d0e0d86f585d42740822b7c4c022/68747470733a2f2f7261772e6769746875622e636f6d2f687970654a756e6374696f6e2f456c67672d75695f677269642f6d61737465722f73637265656e73686f74732f636f6c756d6e732e706e67)[![Gallery](https://camo.githubusercontent.com/2fb066e690f4795684b47efe58eb453b73547298d757392f15a45863f00eef6f/68747470733a2f2f7261772e6769746875622e636f6d2f687970654a756e6374696f6e2f456c67672d75695f677269642f6d61737465722f73637265656e73686f74732f67616c6c6572792e706e67 "Gallery")](https://camo.githubusercontent.com/2fb066e690f4795684b47efe58eb453b73547298d757392f15a45863f00eef6f/68747470733a2f2f7261772e6769746875622e636f6d2f687970654a756e6374696f6e2f456c67672d75695f677269642f6d61737465722f73637265656e73686f74732f67616c6c6572792e706e67)

Usage
-----

[](#usage)

### Grid

[](#grid)

To create a 6-column span, simply add `elgg-small-6` class to your element. To make it responsive, i.e. 12 columns on small devices, and 6 columns on larger devices, use `elgg-small-12 elgg-medium-6`.

By default, spans are not floated. Wrap your elements in `elgg-row`, to float them.

```

    Column 1
	Column 2

```

To add horizontal and vertical gutters, either use padding in nested elements, or add `elgg-column` class.

```

    Column 1
	Column 2

```

### Block Grid / Gallery

[](#block-grid--gallery)

[![User Gallery](https://camo.githubusercontent.com/b398e8fa9f118bbccaebe7d243b27e686859926790d09d05e1f717b671bc2c80/68747470733a2f2f7261772e6769746875622e636f6d2f687970654a756e6374696f6e2f456c67672d75695f677269642f6d61737465722f73637265656e73686f74732f757365722d67616c6c6572792e706e67 "Gallery")](https://camo.githubusercontent.com/b398e8fa9f118bbccaebe7d243b27e686859926790d09d05e1f717b671bc2c80/68747470733a2f2f7261772e6769746875622e636f6d2f687970654a756e6374696f6e2f456c67672d75695f677269642f6d61737465722f73637265656e73686f74732f757365722d67616c6c6572792e706e67)

You can apply `elgg-gallery-$screen-$columns` classes to any list. For example, create a responsive user gallery, that has 6 columns on mobile devices, 8 columns on medium devices, and 12 columns on large devices, use:

```
echo elgg_list_entities(array(
	'types' => 'user',
	'list_type' => 'gallery',
	'gallery_class' => 'elgg-gallery-small-6 elgg-gallery-medium-8 elgg-gallery-large-12',
	'limit' => 48,
));
```

Compatibility
-------------

[](#compatibility)

Plugin versionElgg versioncurrent7.x

###  Health Score

52

—

FairBetter than 96% of packages

Maintenance94

Actively maintained with recent releases

Popularity8

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity85

Battle-tested with a long release history

 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 ~636 days

Recently: every ~6 days

Total

7

Last Release

47d ago

Major Versions

1.0.0 → 3.02026-04-07

3.0 → 4.0.02026-04-19

1.1.0 → 5.0.02026-05-04

5.0.0 → 6.0.02026-05-12

6.0.0 → 7.0.02026-05-14

PHP version history (4 changes)1.1.0PHP >=7.4

5.0.0PHP >=8.1

6.0.0PHP >=8.2

7.0.0PHP >=8.3

### Community

Maintainers

![](https://www.gravatar.com/avatar/5071b1cd852e094b3f564962a625e04c227adc73af30c5b46b243ab8f20154a7?d=identicon)[hypeJunction](/maintainers/hypeJunction)

---

Top Contributors

[![hypeJunction](https://avatars.githubusercontent.com/u/1202761?v=4)](https://github.com/hypeJunction "hypeJunction (38 commits)")

---

Tags

elggelgg-pluginphppluginuielgggrid

### Embed Badge

![Health badge](/badges/hypejunction-ui-grid/health.svg)

```
[![Health](https://phpackages.com/badges/hypejunction-ui-grid/health.svg)](https://phpackages.com/packages/hypejunction-ui-grid)
```

###  Alternatives

[helsingborg-stad/municipio

A bootstrap theme for creating municipality sites.

4028.3k10](/packages/helsingborg-stad-municipio)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)