Проблема с расположением дочерней сетки не на 100% высоты

Question

По какой-то причине я не могу сделать свое изображение на 100% высоким, оно выглядит как нижнее, я перепробовал все и не смог найти, в чем я ошибаюсь: не знаю, проблема в моя сетка размечена, что-то значит с моим кодом тега img

JSX:

 <GallerySection>
      <Container>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            paddingBottom: "20px"
          }}
        >
          <FontAwesomeIcon
            className="adjust"
            icon={faNewspaper}
            size="2x"
            fixedWidth
            color="#fff"
          />
          <h3>Galeria de Fotos</h3>
        </div>
        <div className="grid_gallery">
          <div class="gallery_item">
            <div className="bg">
              <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg" />
            </div>
          </div>
          <div class="gallery_item">
            <div className="bg">
              <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg" />
            </div>
          </div>
          <div class="gallery_item">
            <div className="bg">
              <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg" />
            </div>
          </div>
          <div class="gallery_item">
            <div className="bg">
              <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg" />
            </div>
          </div>
          <div class="gallery_item">
            <div className="bg">
              <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg" />
            </div>
          </div>
          <div class="gallery_item">
            <div className="bg">
              <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg" />
            </div>
          </div>
          <div class="gallery_item">
            <div className="bg">
              <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg" />
            </div>
          </div>
          <div class="gallery_item">
            <div className="bg">
              <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg" />
            </div>
          </div>
          <div class="gallery_item">
            <div className="bg">
              <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg" />
            </div>
          </div>
          <div class="gallery_item">
            <div class="description">
              <p>Lorem ipsum dolor sit amet</p>
            </div>
          </div>
          <div class="gallery_item">
            <div class="description">
              <p>Lorem ipsum dolor sit amet</p>
            </div>
          </div>
          <div class="gallery_item">
            <div class="description">
              <p>Lorem ipsum dolor sit amet</p>
            </div>
          </div>
        </div>
      </Container>
    </GallerySection>

css in JS:

export const GallerySection = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  outline: none;
  background: #004fff;
  position: relative;
  padding: 64px 0;
  clip-path: polygon(0 0, 100% 2vw, 100% calc(100% - 2vw), 0 100%);
  h3 {
    padding-left: 10px;
    font-family: "Poppins", sans-serif;
    font-size: 28px;
    font-weight: 700;
    outline: none;
    color: #fff;
  }
  & .bg {
    height: 100%;
    border: 1px solid white;
    img {
      width: 100%;
      height: 100%;
    }
  }
  & .grid_gallery {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
  }
  & .description {
    padding: 0 10px;
    color: white;
    border-left: 2px solid #fff;
  }
  & .gallery_item:nth-last-child(-n + 3) {
    grid-column: span 2;
  }
  & .gallery_item:nth-of-type(1),
  & .gallery_item:nth-of-type(2),
  & .gallery_item:nth-of-type(3) {
    grid-column: span 2;
  }
  & .gallery_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
`;

пример:

https://codesandbox.io/s/kind-wind-mso42

img:

Answer 1

Вам нужно добавить блок display:, чтобы избавиться от «отступов» (это происходит потому, что по умолчанию изображения являются встроенными блоками):

img {
  display:block;
  width: 100%;
  height: 100%;
}

Это решает проблему.