size of the box is not fixed with the photo size

Question

I'm trying to create a photo gallery similar to https://unsplash.com/ (with unsplash API -> https://unsplash.com/developers)

But the size of the box is not fixed with the photo.

    <div className="imageGrid__container">
          <div className="imageGrid__column">
              <div className="imageGrid__item">
                <img
                  className="imageGrid__itemImage"
                  src=""
                />
              </div>
              <div className="imageGrid__item">
                <img
                  className="imageGrid__itemImage"
                  src=""
                />
              </div>
              <div className="imageGrid__item">
                <img
                  className="imageGrid__itemImage"
                  src=""
                />
              </div>
          </div>
          <div className="imageGrid__column">
            
              <div className="imageGrid__item">
                <img
                  className="imageGrid__itemImage"
                  src=""
                />
              </div>
              <div className="imageGrid__item">
                <img
                  className="imageGrid__itemImage"
                  src=""
                />
              </div>
              <div className="imageGrid__item">
                <img
                  className="imageGrid__itemImage"
                  src=""
                />
              </div>
          </div>
          <div className="imageGrid__column">
              <div className="imageGrid__item">
                <img
                  className="imageGrid__itemImage"
                  src=""
                />
              </div>
              <div className="imageGrid__item">
                <img
                  className="imageGrid__itemImage"
                  src=""
                />
              </div>
              <div className="imageGrid__item">
                <img
                  className="imageGrid__itemImage"
                  src=""
                />
              </div>
          </div>
        </div>

CSS File :

.imageGrid__container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 30px;
  padding-left: 100px;
  padding-right: 100px;
}

.imageGrid__item {
  margin-bottom: 20px;
  border: 1px solid red;
  width: 100%;
}

.imageGrid__itemImage {
  width: 100%;
  background-size: cover;
  background-position: center center;
  object-fit: contain;
  background-repeat: no-repeat;
}

Can you tell me where my mistake is?

Excuse me, the language is not very good.

I tried many things but it did not get better.

It seems like you wanna full boxes with photos, I think you should also give photos height of 100% — Aggestor, Feb 03 '21 at 08:02

score 0 · Accepted Answer · answered Feb 03 '21 at 03:22

The inline and inline-block elements have extra space due to the way setting elements on a line works. You can fix that setting with display: block; to img tags or margin-bottom: -4px;.

In your case, I think the display: block; is better.

size of the box is not fixed with the photo size

Can you tell me where my mistake is?

1 Answers1