Search code examples
cssgrid-layoutcss-grid

CSS Grid - How to get an image to fill grid item space

I'm in the process of building a responsive 3x3 grid, so far this is what I have:

You will notice that this maintains the aspect ratio of each of the images contained within the grid items when resized and it stays in a 3x3 grid (which is desired).

.people-grid {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

.grid-item {
  position: relative;
  display:block;
  background-size:cover;
  border:1px solid red;
}

.grid-item img {
  width:100%;
}

.grid-item-inner {
  position: absolute;
  top:0;
  margin:15px;
  bottom:0;
  width: 90%;
  background:#fdfdfd;
  border:1px solid #78a7d7;
  opacity:0.8;
}

http://jsfiddle.net/3r80vyhn/

However I can't for the life of me work out how to get rid of the additional spacing to the bottom of the image. (the white space between the bottom of the dog and the red border). Is there additional grid properties I can use to assist with this?

I'm a CSS grid newbie, so if there are alternative ways of achieving this I'm open to suggestions.

enter image description here

Solution

  • is it?

    .people-grid {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

.grid-item {
  position: relative;
  display:block;
  border:1px solid red;
  width:100%;
  height:100%;
}

.grid-item img {
  width:100%;
  height:100%;
}

.grid-item-inner {
  position: absolute;
  top:0;
  margin:15px;
  bottom:0;
  width: 90%;
  background:#fdfdfd;
  border:1px solid #78a7d7;
  opacity:0.8;
}
    <div class="people-grid-container">


    <div class="people-grid">

      <a href="" class="grid-item">
          <img src="https://placeimg.com/376/379/animals">
          <div class="grid-item-inner">
            <p>sample</p>
          </div>
      </a>
      <a href="" class="grid-item">
          <img src="https://placeimg.com/376/379/animals">
          <div class="grid-item-inner">
            <p>sample</p>
          </div>
      </a>
      <a href="" class="grid-item">
        <img src="https://placeimg.com/376/379/animals">
        <div class="grid-item-inner">
          <p>sample</p>
        </div>
      </a>

      <a href="" class="grid-item">
          <img src="https://placeimg.com/376/379/animals">
          <div class="grid-item-inner">
            <p>sample</p>
          </div>
      </a>
      <a href="" class="grid-item">
          <img src="https://placeimg.com/376/379/animals">
          <div class="grid-item-inner">
            <p>sample</p>
          </div>
      </a>
      <a href="" class="grid-item">
        <img src="https://placeimg.com/376/379/animals">
        <div class="grid-item-inner">
          <p>sample</p>
        </div>
      </a>

      <a href="" class="grid-item">
          <img src="https://placeimg.com/376/379/animals">
          <div class="grid-item-inner">
            <p>sample</p>
          </div>
      </a>
        <a href="" class="grid-item">
          <img src="https://placeimg.com/376/379/animals">
          <div class="grid-item-inner">
            <p>sample</p>
          </div>
      </a>
      <a href="" class="grid-item">
          <img src="https://placeimg.com/376/379/animals">
          <div class="grid-item-inner">
            <p>sample</p>
          </div>
      </a>
    </div>

</div>