インスタ風 3列 レイアウト

インスタ風の3列レイアウトをしたい。

![hogehoge.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31338/11958ba5-4cbe-34be-1778-9a287bb7176d.png)

そして、女の子をクリックした際にはリンク移動など。
ここにメソッドをクリックした際には、いいねを発火させたい。

参考
https://pecopla.net/web-column/flexbox-1

コピペで動きますよ

```hoge.vue

<style>

    .insta-container{
        display: flex;
        flex-wrap: wrap;
    }
    /*sample1*/
    .insta-container{
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
    }
    .insta-container > div {
        position: relative;
        width: 33.3%;
        height: auto;
        margin: 0%;/*隙間を調節したい*/
        overflow: hidden;
    }
    .insta-container > div:before {
        content: "";
        display: block;
        padding-top: 100%;
    }
    .inner {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
    }
    .inner img{
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: auto;
        height: 100%;
    }

    .insta-container > div span.text-box {
        position: absolute;
        bottom: 2%;
        right: 0%;
        margin:0;/*余計な隙間を除く*/
        padding:5px 15px;/*余計な隙間を除く*/
        font-size: 14px;/*サイズ*/
        border-radius: 0 3px 3px 0;
        font-weight: bold;
        color: #fff;
        background-color: rgba(0,0,0,0.4);

    }


    .insta-container > div .inner {

        display: block;

    }

</style>

<template>


    <div>




        <div>3列画像を作ってみる</div>


        <div class="insta-container">
            <div>
                <a class="inner" @click="ue()">
                    <img src="https://i.pinimg.com/originals/9d/d9/d5/9dd9d5ceb79dd3427d118ff4a1017570.jpg">
                    <span class="text-box">
                        <a @click.stop="hoge()">ここにメソッド</a>
                    </span>
                </a>
            </div>
            <div>
                <a class="inner" @click="ue()">
                    <img src="https://i.pinimg.com/originals/9d/d9/d5/9dd9d5ceb79dd3427d118ff4a1017570.jpg">
                    <span class="text-box">
                        <a @click.stop="hoge()">ここにメソッド</a>
                    </span>
                </a>
            </div>
            <div>
                <a class="inner" @click="ue()">
                    <img src="https://i.pinimg.com/originals/9d/d9/d5/9dd9d5ceb79dd3427d118ff4a1017570.jpg">
                    <span class="text-box">
                        <a @click.stop="hoge()">ここにメソッド</a>
                    </span>
                </a>
            </div>
            <div>
                <a class="inner" @click="ue()">
                    <img src="https://i.pinimg.com/originals/9d/d9/d5/9dd9d5ceb79dd3427d118ff4a1017570.jpg">
                    <span class="text-box">
                        <a @click.stop="hoge()">ここにメソッド</a>
                    </span>
                </a>
            </div>
            <div>
                <a class="inner" @click="ue()">
                    <img src="https://i.pinimg.com/originals/9d/d9/d5/9dd9d5ceb79dd3427d118ff4a1017570.jpg">
                    <span class="text-box">
                        <a @click.stop="hoge()">ここにメソッド</a>
                    </span>
                </a>
            </div>
            <div>
                <a class="inner" @click="ue()">
                    <img src="https://i.pinimg.com/originals/9d/d9/d5/9dd9d5ceb79dd3427d118ff4a1017570.jpg">
                    <span class="text-box">
                        <a @click.stop="hoge()">ここにメソッド</a>
                    </span>
                </a>
            </div>
            <div>
                <a class="inner" @click="ue()">
                    <img src="https://i.pinimg.com/originals/9d/d9/d5/9dd9d5ceb79dd3427d118ff4a1017570.jpg">
                    <span class="text-box">
                        <a @click.stop="hoge()">ここにメソッド</a>
                    </span>
                </a>
            </div>
            <div>
                <a class="inner" @click="ue()">
                    <img src="https://i.pinimg.com/originals/9d/d9/d5/9dd9d5ceb79dd3427d118ff4a1017570.jpg">
                    <span class="text-box">
                        <a @click.stop="hoge()">ここにメソッド</a>
                    </span>
                </a>
            </div>
        </div>

    </div>

    
</template>

<script>



    export default {


        methods: {

            ue(){
                alert("上");
            },

            hoge(){
                alert("伝達停止");
            },

        }
    }
</script>

```

こんな感じでOK!