Grid - is not Responsive


I want to make responsive img gallery using grid. I want that img gallery where positioned in center. attached are css and html what i am using. but problem is that my grid is not responsive. cant someone help me understand why my Grid is not responsive?

Thanks a lot!


Pixels, points, and centimeters are examples of “absolute” measurements. The units you use will always be exactly what you declared regardless of window size. Ems, rems, percents, and fr s are examples of “relative” measurements. They will be proportional to the window size. This was called “fluid” design. This is probably what you want. Responsive design uses media queries and that’s up to you to code.

This will help

Whether you want to design a picture gallery, a portfolio or a card layout, you are always faced with the problem of how this looks on different screen sizes. Media queries are usually used for this. But there is a solution that does not require media queries at all.
/* First the Grid */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 1.5rem;
justify-items: center;
margin: 0;
padding: 0;

/* The Picture Frame */
.gallery-frame {
padding: .5rem;
font-size: 1.2rem;
text-align: center;
background-color: #333;
color: #d9d9d9;

/* The Images */
.gallery-img {
max-width: 100%;
height: auto;
object-fit: cover;
transition: opacity 0.25s ease-in-out;

.gallery-img:hover {
opacity: .7;

You have put class=“wraper” when it is supposed to be class=“wrapper”

Replace the line after body tag with this:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.