Complex CSS grid-CodePudding

I want a grid of thumbnail images, all the same size (250px x 250px) that shrink and grow until a multiple of 250px is reached (so the thumbnails fill all of the available width of the screen at all times).

I know this is kind of tricky, but I figure there's a way to do it with maybe counters and selectors in css.

CodePudding user response：

As far as I'm able to understand your requirement, I've tried creating a codepen for you which will automatically adjust with thumbnails as per pixel available.

Kindly let me know if this is what you are looking for?

https://codepen.io/_makki/pen/podXyJZ

.grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(250px, 1fr));
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div >
  <img src="http://placehold.jp/250x250.png" />
  <img src="http://placehold.jp/250x250.png" />
  <img src="http://placehold.jp/250x250.png" />
  <img src="http://placehold.jp/250x250.png" />
  <img src="http://placehold.jp/250x250.png" />
  <img src="http://placehold.jp/250x250.png" />
  <img src="http://placehold.jp/250x250.png" />
  <img src="http://placehold.jp/250x250.png" />
  <img src="http://placehold.jp/250x250.png" />
</div>

CodePudding user response：

We should add the gap: 10px property!

.grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div >
  <img src="http://placehold.jp/250x250.png" />
  <img src="http://placehold.jp/250x250.png" />
  <img src="http://placehold.jp/250x250.png" />
  <img src="http://placehold.jp/250x250.png" />
  <img src="http://placehold.jp/250x250.png" />
  <img src="http://placehold.jp/250x250.png" />
  <img src="http://placehold.jp/250x250.png" />
  <img src="http://placehold.jp/250x250.png" />
  <img src="http://placehold.jp/250x250.png" />
</div>

CodePudding user response：

Please upload your code to review and edit for corrections. In between you may explore Bootstarp it may help and reduce your efforts for coding and the link for Image Thumbnail is below, enter link description here

Thanks.