gridレイアウト

test.vue

<template lang="pug">
.test
  p(@click="button") button
  //.container.flex
  //  .flex-item
  //    img(src="/img/yoko.png").item
  //    .flex
  //      .flex-item
  //        img(src="/img/tate.png").item
  //      .flex-item
  //        img(src="/img/sikaku.png").item
  //        img(src="/img/sikaku.png").item

  //  .flex-item
  //    .flex
  //      .flex-item
  //        img(src="/img/tate.png").item
  //      .flex-item
  //        img(src="/img/yoko.png").item
  //        img(src="/img/yoko.png").item
  //    .flex-item
  //        img(src="/img/yoko.png").item
  .container.grid(ref="container")
    .item-a
      img(src="/img/yoko.png").item
    .item-b
      img(src="/img/tatega.png").item
    .item-c
      img(src="/img/sikaku.png").item
    .item-d
      img(src="/img/sikaku.png").item
    .item-e
      img(src="/img/tate.png").item
    .item-f
      img(src="/img/yoko.png").item
    .item-g
      img(src="/img/yoko.png").item
    .item-h
      img(src="/img/yoko.png").item
    .item-i
      img(src="/img/yoko.png").item
    .item-j
      img(src="/img/yoko.png").item
    .item-k
      img(src="/img/yoko.png").item

</template>

<style lang="sass" scoped>

.move
  transform: translateX(-30%)
  transition: all 1s

.container
  margin: 10px
  border: 10px solid black
  padding: 1%
  transition: all 1s


.grid
  display: grid
  grid-template-columns: repeat(11, 10%)
  grid-gap: 0.5vw 1% 

  .item-a
    grid-row: 1/2
    grid-column: 1/3

  .item-b
    grid-row: 2/4
    grid-column: 1/2

  .item-c
    grid-row: 2/3
    grid-column: 2/3

  .item-d
    grid-row: 3/4
    grid-column: 2/3

  .item-e
    grid-row: 1/3
    grid-column: 3/4

  .item-f
    grid-row: 3/4
    grid-column: 3/5

  .item-g
    grid-row: 1/2
    grid-column: 4/6

  .item-h
    grid-row: 2/3
    grid-column: 4/6

  .item-i
    grid-row: 1/2
    grid-column: 6/8

  .item-j
    grid-row: 1/2
    grid-column: 8/10

  .item-k
    grid-row: 1/2
    grid-column: 10/12

.item
  display: block
  width: 100%

.flex
  display: flex
</style>

<script>
export default {
  components:{
  },
  data() {
    return {
    }
  },
  methods: {
    button() {
      this.$refs.container.classList.toggle('move')
    }
  },
  created() {
  },
  mounted() {
    const el = document.getElementsByClassName("grid")[0];
    const handleStart = () => {
      console.log('handleStart')
    }
    const handleEnd = () => {
      console.log('handleEnd')
    }
    const handleCancel = () => {
      console.log('handleCancel')
    }
    const handleMove = () => {
      console.log('handleMove')
    }
    el.addEventListener("touchstart", handleStart, false);
    el.addEventListener("touchend", handleEnd, false);
    el.addEventListener("touchcancel", handleCancel, false);
    el.addEventListener("touchmove", handleMove, false);
    el.addEventListener("mouseup", handleStart, false);
  }
}
</script>