CSS Grids correct alignment

ionic-v1
1

Trying to realize the above structure in my UI. A big picture and thumbnails below it.
I am using the grid components for it. Code:

<div class="row">
    <div class="col">
        <img url="bigPic"></img>
    </div>
</div>
<div class="row">
    <div class="col" ng-repeat="pic in Pics">
        <img url="pic"></img>
    </div>
</div>

Now I want to delete pictures out of Pics. That’s why I introduce badges with the following code:

<div class="row">
    <div class="col">
        <img url="bigPic"></img>
    </div>
</div>
<div class="row">
    <div class="col" ng-repeat="pic in Pics">
        <img url="pic"></img>
        <span class="badge badge-assertive"
                                  on-tap="removePic($index)">
            <i class="icon ion-ios7-close-empty"></i>
        </span>
    </div>
</div>

And this results in the following (with a css class moving the badges in the top left corner):

The Problem here is that the thumbnails are no longer centered underneath the big picture. I guess the flexbox is taking into account the size of the badge somehow.
My obvious question now: how can I ignore the badge in the alignment calculation and make this thumbnail row centered, even with badges?
Thanks in advance.