[Vue.js/Nuxt] vue-masonry-css를 이용해서 카드레이아웃 구현하기

vue-masonry-css 레이아웃 적용하기

📌masonry Layout

masonry는 건물의 벽, 돌벽 등으로 벽돌을 쌓는 공사를 말한다.

보통 이런 레이아웃은 핀터레스트 스타일이라고 해서 

높이가 다른 각자의 카드들을 높이에 맞춰 딱딱 들어맞는 형식의 레이아웃이다.

 

 

 

👩‍💻vue프로젝트에서 masonry 레이아웃 이용하기

실제로 만들려면, npm 중에 vue-masonry-css를 이용하면 손쉽게 적용할 수 있다.

 

vue-masnory-css

vue에서 masnory 레이아웃을 만들어줄 npm이 존재한다.

사용방법은 그냥 npm install만 해주면 된다.

npm i vue-masonry-css --save

 

plugins/client.js

import Vue from 'vue'
import VueMasonry from 'vue-masonry-css'
 
Vue.use(VueMasonry);

 

sample.vue

<template>
    <div>
        <masonry :cols="3" :gutter="10" class="card-style">
            <div v-for="(item, index) in 7" :key="index">
                <img :src="require(`~/assets/images/${item}.jpg`)"/>
            </div>
        </masonry>
    </div>
</template>
<style>
    .card-style > div > div {
        border-radius: 5px;
        padding:20px;
        margin:0 0 5px 0;
    }

    .card-style > div > div > img {
        width:100%;
    }

</style>

 

샘플 화면

masonry 레이아웃

해당 코드로 적용을 해보면,

높이가 다른 이미지를 넣어도 알아서 세팅이 된다.