Grid - markhowellsmead/helpers GitHub Wiki

## 500px-style grid using Flexbox

• Calculations from xieranmaya #wowza

JavaScript

/**
 * Calculate flex sizes for a grid layout
 * Calculations from https://github.com/xieranmaya/blog/issues/6 #wowza
 * @param  {array} image_sizes      The sizes of an image: {width, height}
 * @param  {integer} target_height  Target height of each image in the grid
 * @return {array}                  The calculated, named sizes
 */
var calculateSizes = function(image_sizes, target_height){

    if (!image_sizes) {
        image_sizes = [600,400];
    }

    return {
        'flex_grow': image_sizes[0] * 100 / image_sizes[1],
        'flex_basis': image_sizes[0] * target_height / image_sizes[1],
        'aspect_ratio': image_sizes[1] / image_sizes[0] * 100
    };
}

PHP

From 5.4.0 onwards, due to short array syntax.

var calculateSizes = function($image_sizes, $target_height = 150){

    if (!$image_sizes || empty($image_sizes)) {
        $image_sizes = [600,400];
    }

    return [
        'flex_grow' => $image_sizes[0] * 100 / $image_sizes[1],
        'flex_basis' => $image_sizes[0] * $target_height / $image_sizes[1],
        'aspect_ratio' => $image_sizes[1] / $image_sizes[0] * 100 . '%'
    ];

};

SCSS

Don't forget to run Autoprefixer on this to ensure the widest possible browser support. Uses CSS Flexbox so check browser support for your site requirements.

.mod.grid500 {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    margin: 0 auto;
    &::after {
        content: '';
        flex-grow: 999999999;
        min-width: 20%;
        order: 999999999;
    }
    .grid-item {
        margin: .0625rem;
        background-color: #f0f0f0;
        position: relative;
        &:hover .caption {
            opacity: 1;
        }
        @media screen and (min-width: 64rem) {
            margin: .125rem;
        }
    }
    .uncollapse {
        // Stop layout collapsing before the images have loaded
        display: block;
        background-color: #f0f0f0;
    }
    .image {
        position: absolute;
        vertical-align: bottom;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}