Html gallery

<style>
.grid {
  display: grid;
  gap: 20px;
}
.grid--gallery {
  grid-template-columns: repeat(4, 1fr);
}
.image {
  position: relative;
}
.image.is-square {
  padding-top: 100%;
}
.image img {
  position: absolute;
  inset: 0;
  /*
  Use this if inset is not supported
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  */
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
</style>

<div class="grid grid--gallery">
  <div class="grid__item">
    <div class="image is-square">
      <img src="[IMAGE_URL]" alt="[IMAGE_ALT]" />
    </div>
  </div>
  <!-- Repeat grid__item for all images in gallery -->
</div>

Similar codes

9 votes156 views4 answers
Windows Vista
Html
1 vote167 views1 answer
Html select color
Html
15 votes172 views2 answers
Scroll smooth css
Html
4 votes163 views1 answer
Blobs fish
Html
65 votes208 views6 answers
How to add links to html
Html
0 vote160 views1 answer
Impossible to create the root directory "/var/www/html/laraship-subscription/storage/app/public/media/user_v1oz1Yz27j/26
Html
5 votes150 views1 answer
Javascript tutorial for beginners
Html
0 vote158 views1 answer
Mettre des écritaux sur le coté html
Html
0 vote174 views2 answers
Html interview questions
Html
8 votes153 views10 answers
Hi
Html