Corresponding columns of the same height in rows with CSS3 / HTML5 Only

Question

I would like to create a responsive tabular layout using divthat will only display on mobile devices , where the elements are of equal height for each row, using only CSS / CSS3, not JavaScript, nor jQuery, nor the plugin .

I found a working example that uses JS : here is a CODEPEN live example .

I did a study, but I did not find a working example that uses only pure CSS / CSS3 / HTML5 (e.g. flexbox) .

It’s best to have only floating divs and not crack CSS: the layout should have a different column number, depending on the different size of the device, working to respond like the screenshots below:

Mobile device format

Tablet plan

Desktop layout

Answer 1

Solution with flexboxesand media queries: http://jsfiddle.net/szxmw7ko/4/

#container{
  display: flex;

  align-items: stretch;
  flex-wrap: wrap;
} 


@media (max-width: 480px) {
    #container div {
        max-width: 98%;
    }
}
@media (min-width: 480px) and (max-width: 1080px) {
    #container div {
        max-width: 48%;
    }
}
@media (min-width: 1080px) {
    #container div {
        max-width: 23%;
    }
}

align-items: stretchtells flex items to fill the available space along the transverse axis . This is what allows you to have equal height for all objects.

flex-wrap: wrap . .

max-width: XX% . , - flex-wrap, , . , , , , .

@media (max-width: XX%), , , , .

Flexboxes:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/almanac/properties/f/flex-wrap/

Answer 2

hot_barbara, - IE-, flexbox, , . , css, , / .

javascript jQuery, : https://www.tenpixelsleft.com/responsive-equal-height-grid-columns/

, , , ​​.

/* ==================================================== *
 *  @param elementGroup - a group of dom objects to be iterated over and aligned
 *  @param offset - (int) offset number to be added to the height
 *  @param afterAlignment - callback function
 *  ==================================================== */
setElementGroupHeight = function(elementGroup, offset, afterAlignment) {
    var offset = typeof offset !== 'undefined' ? offset : 0;
    var tallestHeight = 0;
    var elHeight = 0;
    $.each(elementGroup, function() {
        // Since this function is called every time the page is resized, we need to reset the height
        // so each container can return to its natural size before being measured.
        $(this).css('height', 'auto');
        elHeight = $(this).outerHeight() + offset;
        if (elHeight > tallestHeight) {
            tallestHeight = elHeight;
        }
    });
    // Set the height of all elementGroup elements to the tallest height
    elementGroup.css('height', Math.ceil(tallestHeight));
    // Callback
    if (afterAlignment && typeof(afterAlignment) === "function") {
        afterAlignment();
    }
}

:

jQuery(function($) {
    // Initialise on page load
    var postGrid = $('.post-grid .js-align-col');
    if (postGrid.length) {
        setElementGroupHeight(postGrid);
        $(window).on('resize', function(e, resizeEvent) {
            // Realign on resize
            setElementGroupHeight(postGrid);
        });
    }
});

, . , .