ListView widget improved to use Masonry (

ListView widget improved to use Masonry (


Yii2 widget to extend the Yii2 ListView for use it as Masonry grid layout (

Widget demo screenshot:


The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist nerburish/yii2-masonry-view "*"

or add

"nerburish/yii2-masonry-view": "*"

to the require section of your composer.json file.


The usage is similar to default ListView Widget (

You just need a dataProvider and prepare the item template for your model.

In clientOptions you can pass the Masonry options to modify the plugin behavior (see

You can also attach a cssFile for styling the grid.


We have this model:

class MyModel extends yiibaseModel
	public $id;
	public $title;
	public $description;

And this item template named _item.php:

<h3><?= $model->title ?></h3>
<p><?= $model->description ?></p>

Finally, in our view, we run the widget:

<?php echo nerburishmasonryviewMasonryView::widget([
	'dataProvider' => $dataProvider,
	'itemView' => '_item',
	'clientOptions' => [
	  'gutterWidth' => 15,
	'cssFile' => [
]) ?>

Below, the css used for the demo:

/* ---- grid ---- */
.grid {
  box-sizing: border-box;

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;

/* ---- grid-item ---- */
.grid-item {
  width: 20%;
  padding: 10px;  
  margin: 10px auto;
  float: left;
  background: #e4e4e4;
  border-radius: 5px;

You may be interested in Isotope Widget because implements Masonry and other layouts and funcionalities at once.

There is also a MatchHeight.js implementation of ListView widget:


Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *