Aligning content in a grid using Vue


Another quick Vue package, to achieve a fairly common issue. vue-match-heights exists to aid in grid layouts with elements of varying heights. Simply put, this package provides a single Vue directive that loops through given selectors and ensures they are the same height.

Similar functionality can be achieved with flexbox, but if browser compatibility is a concern or you need greater depth in deciding which elements should scale, this plugin may be useful to you.

For instance, you might have blocks with a header, content and button block. You want the content to start at the same height, and the buttons to be aligned to the bottom of the block. To do this, you would ensure the title is the same height, then the content, and the button should fall into place. This can be achieved with the following markup:

<div
    class="row"
    v-match-heights="{
        el: ['.title', '.content'],
    }"
>
    <div class="col-sm-6" v-for="post in posts">
        <div class="block">
            <div class="title">
                <h3>...</h3>
            </div>
            <div class="content">
                ...
            </div>
            <div class="button">
                <a class="btn">Button</a>
            </div>
        </div>
    </div>
</div>

You can also pass in another option to disable the sizing of elements on specific viewports. For details on this, check the Github repo.

If you like this plugin, please share and ⭐️ on Github.

Related Posts

Netsells 💙 Vue (+ Vue.js London)

Why we at Netsells love the Vue.js framework and where you can find us later this week

Maximising Productivity with Slack

Staying productive with your favourite workplace chat app

Stop with the unhelpful loading spinners

Give some context to your users with some helpful loading text

Responsive Blocks and Vertical Alignment

How to create responsive cross-browser blocks with vertically aligned content

Development Goals for 2018

New Year Promise.resolve()

Progressively Infiltrating Google

Attending the Google Academy for a course on Progressive Web Apps

Laravel Certification Prelude

The Laravel Certification exam is here and I'm taking it.

Helpful Laravel Valet aliases

Valet up, up, down, down, left, right, left, right, B, A.

Serving static content in Laravel Valet

Check out my custom valet driver for prototyping outside of a framework.

Validating payment details in Vue

A simple Vue plugin to validate card details