Maintain the same flexible height between lines

Let's say you want to display items (like small cards) and you want them to appear like this:

First screen:

Second screen:

In a nutshell: always fill the full width of the container, wrap, keep the minimum fixed size, and of course fill the rows with the maximum cards possible.

Therefore, we can already say that:

• Fixed width is not an option as it does not fill the full width of the container
• Percentage width won't work because you can't add more tiles on one line without doing an additional media query (can be very boring and it doesn't scale at all if you want the content to change one day and the minimum card width)

My first one, though it was about flexbox , ended up like this:

You can see the jsfiddle here to see the code.

We can see that the first line is perfect! However, if no matter how many rows there are, if the last row does not have the same cardinality as the others, it will not display well. (i.e. stick to the left).

ok considering how flex-grow works . But then how do you create the effect?

My solution was to create a custom directive (I work with Angular), it works very well (my first images are displayed this way thanks to this.

Here is the directive code:

(function () {

'use strict';

angular.module('app')

    .directive('flexGrowConsistent', function ($window, $document) {

            var directive = {};
            directive.restrict = 'A';

            directive.link = function (scope, elements, attrs) {

                $document.ready(onResize);

                function onResize() {

                    //container width
                    var cw = elements[0].parentElement.offsetWidth;
                    // first element width
                    var w = elements[0].parentElement.firstElementChild.offsetWidth;

                    if (isWrapped(w, cw, scope.$index)) {
                        elements.css({
                            maxWidth: w + 'px'
                        });
                    }

                }

                /*
                 Tell if an element is wrapped given element width, container width and index
                 Take care of the incertainty from javascript with the -0.5
                 */
                function isWrapped(w, cw, index) {
                    return ((w - 0.5) * (index + 1) > cw) && index > 0;
                }

                function cleanUp() {
                    angular.element($window).off('resize', onResize);
                }

                angular.element($window).on('resize', onResize);

                scope.$on('$destroy', cleanUp);

            };

            return directive;
        }
    );
})();

      

        
        
        
      

    

My question is, is there a way to do this with pure CSS? ... I really dislike using Javascript for pure display.

If you have any suggestions for improving the directive, they are also welcome.