I recently set up a flex grid gallery and now I'm trying to figure out how to turn only the images into router-links rather than the entire gallery-item. Here's an example of my Vue component .vue code:
<template>
<div class="gallery">
<div class="gallery-item">
<router-link to="/cat"><img src="../assets/cat.jpg" alt="cat"></router-link>
</div>
</div>
</template>
Below is the CSS styling for the grid gallery:
<style scoped>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
margin: 20px;
}
.gallery-item {
background-color: aquamarine;
max-height: 300px;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>