Currently, I am utilizing angular-deckgrid for image display purposes. Within a container, there are two columns in which images are displayed with the column-1-2 class according to the documentation. However, in certain scenarios where only one image is present in the last row, I would like that particular image to occupy the entire width instead of the standard 50% space allocation.
The rendering of the two columns appears as follows:
<div deckgrid="" class="deckgrid ng-isolate-scope" source="loves">
<div data-ng-repeat="column in columns" class="column column-1-2">
<div data-ng-repeat="card in column" data-ng-include="cardTemplate" class="ng-scope"> "my card layout here" </div>
<div data-ng-repeat="card in column" data-ng-include="cardTemplate" class="ng-scope"> "my card layout here" </div>
<div data-ng-repeat="card in column" data-ng-include="cardTemplate" class="ng-scope"> "my card layout here" </div>
</div>
<div data-ng-repeat="column in columns" class="column column-1-2">
<div data-ng-repeat="card in column" data-ng-include="cardTemplate" class="ng-scope"> "my card layout here" </div>
<div data-ng-repeat="card in column" data-ng-include="cardTemplate" class="ng-scope"> "my card layout here" </div>
</div>
</div>
It can be observed that the first column has three cards while the second column has two. My objective is for the third card in the first column to span the whole width. Unfortunately, achieving this via the controller is not possible due to the template not being rendered yet. I attempted a CSS solution along the lines of:
.column-1-2 div[data-ng-repeat]:last-child {
width:200%!important;
}
However, I am unsure how to verify if the first and second columns have an unequal number of children using CSS.
Thank you.