hypejunction/ui_grid

Responsive CSS grid system for Elgg

7.0.0 2026-05-10 10:13 UTC

Requires

• php: >=8.2
• composer/installers: ^2.0
• elgg/elgg: ^7.0

GPL-2.0-or-later

• Ismayil Khayredinov

• ui
• plugin
• grid
• elgg

README

Features

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

Usage

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.

<div class="elgg-row">
    <div class="elgg-small-12 elgg-medium-6">Column 1</div>
	<div class="elgg-small-12 elgg-medium-6">Column 2</div>
</div>

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

<div class="elgg-row">
    <div class="elgg-column elgg-small-12 elgg-medium-8">Column 1</div>
	<div class="elgg-column elgg-small-12 elgg-medium-4">Column 2</div>
</div>

Block Grid / Gallery

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

Plugin version	Elgg version
current	7.x