时间戳

首页 > 解决方案 > How to make the grid columns smaller and the same size?

html - 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

标签： htmlcss

解决方案

您可以在一行中有 5 个图像，grid-template-columns: repeat(5, 1fr);它会在一行中容纳 5 个元素，所有元素都具有相同的宽度。

height: calc(100vh /3);您可以通过放置图库图像来根据视口高度控制图像的高度。

.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>

推荐阅读