CODEWITHSUNDEEP
htmlcss
Mhmd Admn
Mhmd Admn

Reputation: 369

How to make the grid columns smaller and the same size?

I have a gallery of gifs and I put them in a grid, here's the image. I want to make the columns smaller like at least 5 images in one row, and in the same size(in the image you can see there's a difference in height). here's the css:

.gallery {
  margin: 5px;
  border: 1px solid #ccc;
}

.gallery:hover {
  border: 1px solid #777;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit:cover;
}
.container {
  background-color: #222324;
  padding: 20px;
  margin: 20px;
  overflow: auto;
  text-align: center;
}

and the html:

<div class='container' style='display: grid;grid-template-columns: auto auto auto;'>
    <div class='gallery'>
        <img src=GIFURL>
    </div>
    <div class='gallery'>
        <img src=GIFURL2>
    </div>
    ...
</div>

thanks

Upvotes: 0

Views: 336

Answers (1)

Dhruvi Makvana
Dhruvi Makvana

Reputation: 905

You can have 5 images in a row with help of grid-template-columns: repeat(5, 1fr); It will accommodate 5 elements in a row all having the same width.

you can control the height of images based on viewport height by putting height: calc(100vh /3); on gallery image.

.gallery {
  margin: 5px;
  border: 1px solid #ccc;
}

.gallery:hover {
  border: 1px solid #777;
}

.gallery img {
  width: 100%;
  height: calc(100vh /3);
  object-fit:cover;
}
.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background-color: #222324;
  padding: 20px;
  margin: 20px;
  overflow: auto;
  text-align: center;
}
<div class='container'>
  <div class='gallery'>
    <img src="https://picsum.photos/id/237/200/200">
  </div>
  <div class='gallery'>
    <img src="https://picsum.photos/id/237/200/400">
  </div>
  <div class='gallery'>
    <img src="https://picsum.photos/id/237/200/300">
  </div>
  <div class='gallery'>
    <img src="https://picsum.photos/id/237/200/300">
  </div>
  <div class='gallery'>
    <img src="https://picsum.photos/id/237/200/200">
  </div>
  <div class='gallery'>
    <img src="https://picsum.photos/id/237/200/100">
  </div>
  <div class='gallery'>
    <img src="https://picsum.photos/id/237/200/500">
  </div>
  <div class='gallery'>
    <img src="https://picsum.photos/id/237/200/300">
  </div>
  <div class='gallery'>
    <img src="https://picsum.photos/id/237/200/300">
  </div>
  <div class='gallery'>
    <img src="https://picsum.photos/id/237/200/100">
  </div>
  <div class='gallery'>
   <img src="https://picsum.photos/id/237/200/100">
  </div>
</div>

Upvotes: 1

Related Questions