Grid/Flex positioning - Image Grid?
It's basically there, but for some reason I have a lot of space on the right, but no space on the left?
<template>
<div class="shopImages">
<img src="../assets/shop/store.jpg" alt="store cushion" />
<img src="../assets/shop/sheep.jpg" alt="sheep cushion" />
<img src="../assets/shop/hunting.jpg" alt="sheep cushion" />
<img src="../assets/shop/farm.jpg" alt="sheep cushion" />
<img src="../assets/shop/horse.jpg" alt="sheep cushion" />
<img src="../assets/shop/set.jpg" alt="sheep cushion" />
<img src="../assets/shop/board.jpg" alt="sheep cushion" />
</div>
</template>
<style scoped>
.shopImages {
display: inline-grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 50px;
}
img {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
margin: auto;
}
</style><template>
<div class="shopImages">
<img src="../assets/shop/store.jpg" alt="store cushion" />
<img src="../assets/shop/sheep.jpg" alt="sheep cushion" />
<img src="../assets/shop/hunting.jpg" alt="sheep cushion" />
<img src="../assets/shop/farm.jpg" alt="sheep cushion" />
<img src="../assets/shop/horse.jpg" alt="sheep cushion" />
<img src="../assets/shop/set.jpg" alt="sheep cushion" />
<img src="../assets/shop/board.jpg" alt="sheep cushion" />
</div>
</template>
<style scoped>
.shopImages {
display: inline-grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 50px;
}
img {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
margin: auto;
}
</style>
