Yii2 - listView项之间的差距

In my Sitecontroller actionIndex i have a dataProvider that filters products by category and then displays them inside a listView:

$model = new Produtos();
    $searchModel = new ProdutosSearch();
    $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

    // get the posts in the current page
    $post = $dataProvider->getModels();

    return $this->render('index',
        ['imagem1' => $imagem1, 'imagem2' => $imagem2,'imagem3' => $imagem3, 'model' => $model, 'searchModel' => $searchModel, 'dataProvider' => $dataProvider]);

In my site/index.php i render the view to show the products:

<?php echo $this->render('//produtos/view2', ['model' => $model, 'searchModel' => $searchModel, 'dataProvider' => $dataProvider]); ?>

In my produtos/view2 i have:

<nobr>
        <?= $form->field($searchModel, 'categoria')->dropDownList(ArrayHelper::map(Categorias::find()->all(), 'categoria','categoria'), ['prompt'=>Yii::t('yii', 'Todos os produtos...')])  ?>
        <?= Html::submitButton(Yii::t('app', 'Pesquisar'), ['class' => 'btn btn-warning']) ?>
    </nobr>

<?= ListView::widget([
        'dataProvider' => $dataProvider,
        'itemView' => '_view2',
        'summary' => '',
    ]); ?>

In my produtos/_view2.php i have:

<?= DetailView::widget([
    'model' => $model,
    'options' => ['class' => 'detail1-galeria-view2'],
    'attributes' => [
        // cria um array com a fotografia, em que carrega a path no campo fieldName da bd
        [
            'attribute'=>'',
            //'value'=>$model->foto,
            'value'=>Html::a(Html::img(Yii::$app->getUrlManager()->getBaseUrl() . "/" .$model->foto, ['width'=>'230', 'height' => "256"]), $model->foto),
            'format' => 'raw',
        ],
        [
        'attribute'=>'',
        'value'=>$model->nome,
        ],
        [
        'attribute'=>'',
        'value'=>$model->categoria,
        ],
        [
        'attribute'=>'',
        'value'=>$model->descricao,
        ],
        [
        'attribute'=>'',
        'value'=>$model->valor.' '.'€',
        ],
        // info
        [
        'attribute'=>'',
        'format' => 'raw',
        // nesta hiperligação passo o valor do model->nome deste registo para encomendas/create
        'value'=> Html::a(Yii::t('app','Comprar'), Url::toRoute(['encomendas/create', 'nome' => $model->nome, 'preco' => $model->valor])),
        ],
    ],
]) ?>

When i filter category by all products all items appear side by side, but when i filter by some category (clothes per example) the render of the filtered products is done but with GAPS, here and there. The filter remove the products not belonging to the active category and the listView render gaps.

Here is a screen capture of some gaps:

How to solve this?

EDIT: The following css class almost solved the issue:

.detail1-galeria-view2{
margin-bottom:40px;
width: 380px; /* this value fixed almost all gaps for the detailView */
float:left;
color:#201c0e;
font-weight:500;
font-size:12px;
text-align:center;
}

This is styling issue rather than a php/yii issue.

In your css:

.clearfix {
    clear: both;
}

At the top of your _view2.php file add the following code

<?php
if ($index + 1 % 4 == 0 && $index !== 0) {
    echo '<span class="clearfix"></span>
}
?>

This should inject a span tag after every 4 items (change this to match the number of columns you want.

The span uses the css clear command to reset the float position.

Edit: based on the comments

You may have to tweak the css in order to effectively clear the float.

Try adding this to your css:

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both; 
}

You may need to tweak the css further as it's specific to your site.