KPC
Kevin Powell - Community•3d ago
CDL

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>
No description
No description
9 Replies
CDL
CDLOP•3d ago
width: 100% seems to have worked inside the shopImages container
Mannix
Mannix•3d ago
do you need to set explicit width on the img ??
CDL
CDLOP•3d ago
maybe not, I did try to use em, I could use 20em for the same result
Mannix
Mannix•3d ago
how about not setting it at all grid should take care of it
CDL
CDLOP•3d ago
oh you're right, it does. only issue I have now is they touch the sides, I'd want some space on the edges.. would that be accomplished with adding padding onto the container?
CDL
CDLOP•3d ago
padding: 10em would give this result
No description
CDL
CDLOP•3d ago
though when I squish it down to a mobile view, the images actually dissappear hahahaha
Mannix
Mannix•3d ago
sorry for late response but maybe the flexbox used on the img tag is doing this also you should make your images responsive with max-width: 100%;
CDL
CDLOP•3d ago
I keep forgetting max/min width, I’ll do that, thanks

Did you find this page helpful?