Kevin Powell - Community•2y ago

How to create empty cards with svg picture inside set to position absolute?

Hi, I have a pickle. I am trying to build a section with cards below. The thing is those 'doggo" pictures are in svg format and can be in 3 centered positions: left, center, right. How can I set those cards to have equeal min-height and min-width and in the same time won't be collapsed? I tried to set width and height but it is not scalable. I mean when I am shrinking screen they overlapping each other. Is there anyway to create empty div with this picutre inside and be scalable? Thanks in advance

2 Replies

Kevin Powell•2y ago

Looks like a simple grid to me. Something like:

.card-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
}

.card {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.card-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
}

.card {
  width: 100%;
  aspect-ratio: 1 / 1;
}

You can position the svgs in a few different ways from there, really... Depends on the svgs themselves though.

KramarSeniorOP•2y ago

Didn't look into this way. However worked like magic, thank you so much 😄

Gaming

Programming

How to create empty cards with svg picture inside set to position absolute?