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?
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.
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.
CSS-Code
/* 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;
}