HTML CSS Image is bigger than parent div

Question

I have a problem. I created a page with a CSS grid where I show matches from my database. Everything works fine if I use all the columns (4 columns), but when I only have 3 matches the image of match jumps in size to fill in the rest. Here is the code:

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    padding: 30px;
}

.page-container {
    width: 90%;
    margin: auto auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
    column-gap: 40px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.match {
    background-color: blue;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 280px;
    background-color: white;
    border-radius: 32px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.country {
    top: 25px;
    right: 25px;
    position: absolute;

}

.country img {
    border-radius: 20px;
    height: 40px;
    width: 40px;
}


.title {
    font-size: 35px;
    margin-bottom: 10px;
    font-family: 'Roboto', sans-serif;
    color: red;
}

.image-container {
    position: relative;
    width: 100%;
    display: block;
}

.coverimage {
    border-radius: 30px;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    filter: brightness(80%);
}

.user-info {
    position: absolute;
    bottom: 0;
    left: 0;
    vertical-align: bottom;
    padding-left: 15px;
    padding-bottom: 10px;
}

.user-info .user-name {
    font-size: 20px;
    font-weight: bold;
    color: white;
    padding-bottom: 5px;
    font-weight: bold;
}

.user-info .user-details {
    font-size: 18px;
    color: white;
}


.link {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    margin: auto auto;
}

.link a {
    color: red;
    text-decoration: none;
    padding: 5px;
}

.link a:link {
    color: red;
}

/* visited link */
.link a:visited {
    color: red;
}

/* mouse over link */
.link a:hover {
    color: #B81A04;
}

/* selected link */
.link a:active {
    color: #B81A04
}



.previous {
    text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
    text-align: center;
    background-color: #f1f1f1;
    color: black;
}

.next {
    text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--corendon-red);
    color: white;
}

.space {
  margin-left: 2.5em;
  padding: 0 7em 5em 0;
  border-width: 2px;
}

<!-- CONTENT -->
<div class="Container">
        <h1>My Matches</h1>

        <div class="page-container" id="myMatches">
    
      <div class="match">
        <div class="image-container">
          <img src="https://cdn.prijsvrij.nl/images/Landingpages/GeotextImages/nl/Plein%20Polen.jpg" class="coverimage">
          <div class="country">
            <img src="https://upload.wikimedia.org/wikipedia/commons/1/12/Flag_of_Poland.svg">
          </div>
          <div class="user-info">
            <div class="user-name">
              Alexander Vreeswijk
            </div>
            <div class="user-details">
              20 Jaar, Man<br>€1000 - €2000
            </div>
          </div>
        </div>
        <div class="link">
          <a href="mijn_matches_profiel.html?52">Bekijk</a>
          <img src="img/page/aanbevolen_matches/pijl.png">
        </div>
      </div>
      
      <div class="match">
        <div class="image-container">
          <img src="https://cdn.prijsvrij.nl/images/Landingpages/GeotextImages/nl/Plein%20Polen.jpg" class="coverimage">
          <div class="country">
            <img src="https://upload.wikimedia.org/wikipedia/commons/1/12/Flag_of_Poland.svg">
          </div>
          <div class="user-info">
            <div class="user-name">
              Alexander Vreeswijk
            </div>
            <div class="user-details">
              20 Jaar, Man<br>€1000 - €2000
            </div>
          </div>
        </div>
        <div class="link">
          <a href="mijn_matches_profiel.html?52">Bekijk</a>
          <img src="img/page/aanbevolen_matches/pijl.png">
        </div>
      </div>
    
    </div>

    <div class="space"></div>

        <a href="#" class="previous" onclick="backPage()"> Previous</a>
        <a href="#" class="next" onclick="nextPage()">Next</a>
    
    <div class="space"></div>
</div>

As you can see, the less matches I have, the bigger a match get, but I want them to keep the size and just stay in their column. Why is this happening?

Answer 1

i hope this matches with your goal,

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  padding: 30px;
}

.page-container {
  width: 90%;
  margin: auto auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  column-gap: 40px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.match {
  position:relative;
  background-color: blue;
  max-width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: max-content;
  background-color: white;
  border-radius: 32px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.country {
  top: 25px;
  right: 25px;
  position: absolute;
}

.country img {
  border-radius: 20px;
  height: 40px;
  width: 40px;
}

.title {
  font-size: 35px;
  margin-bottom: 10px;
  font-family: 'Roboto', sans-serif;
  color: red;
}

.image-container {
  position: relative;
  max-width: 100%;
  margin:auto;
  display: flex;
}

.coverimage {
  position:relative;
  border-radius: 30px;
  top: 0;
  left: 0;
  padding:2px;
  max-width: 100%;
  filter: brightness(80%);
}

.user-info {
  position: absolute;
  bottom: 0;
  left: 0;
  vertical-align: bottom;
  padding-left: 1rem;
  padding-bottom: 10px;
}

.user-info .user-name {
    position:relative;
  font-size: 20px;
  font-weight: bold;
  color: white;
  padding-bottom: 5px;
  font-weight: bold;
  
}

.user-info .user-details {
  font-size: 18px;
  color: white;
}

.link {
    position:absolute;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  margin: auto auto;
}

.link a {
  text-align:center;
  color: red;
  text-decoration: none;
  padding: 5px;
}

.link a:link {
  color: red;
}


/* visited link */

.link a:visited {
  color: red;
}


/* mouse over link */

.link a:hover {
  color: #B81A04;
}


/* selected link */

.link a:active {
  color: #B81A04
}

.previous {
position: relative;
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
  text-align: center;
  background-color: #f1f1f1;
  color: black;
}

.next {
  position:relative;
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--corendon-red);
  color: gray;
}

.space {
  margin-left: 2.5em;
  padding: 0 7em 5em 0;
  border-width: 2px;
}

<!-- CONTENT -->
<div class="Container">
  <h1>My Matches</h1>

  <div class="page-container" id="myMatches">

    <div class="match">
      <div class="image-container">
        <img src="https://cdn.prijsvrij.nl/images/Landingpages/GeotextImages/nl/Plein%20Polen.jpg" class="coverimage">
        <div class="country">
          <img src="https://upload.wikimedia.org/wikipedia/commons/1/12/Flag_of_Poland.svg">
        </div>
        <div class="user-info">
          <div class="user-name">
            Alexander Vreeswijk
          </div>
          <div class="user-details">
            20 Jaar, Man<br>€1000 - €2000
          </div>
        </div>
      </div>
      <div class="link">
        <a href="mijn_matches_profiel.html?52">Bekijk</a>
        <img src="img/page/aanbevolen_matches/pijl.png">
      </div>
    </div>

    <div class="match">
      <div class="image-container">
        <img src="https://cdn.prijsvrij.nl/images/Landingpages/GeotextImages/nl/Plein%20Polen.jpg" class="coverimage">
        <div class="country">
          <img src="https://upload.wikimedia.org/wikipedia/commons/1/12/Flag_of_Poland.svg">
        </div>
        <div class="user-info">
          <div class="user-name">
            Alexander Vreeswijk
          </div>
          <div class="user-details">
            20 Jaar, Man<br>€1000 - €2000
          </div>
        </div>
      </div>
      <div class="link">
        <a href="mijn_matches_profiel.html?52">Bekijk</a>
        <img src="img/page/aanbevolen_matches/pijl.png">
      </div>
    </div>

  </div>

  <div class="space"></div>

  <a href="#" class="previous" onclick="backPage()"> Previous</a>
  <a href="#" class="next" onclick="nextPage()">Next</a>

  <div class="space"></div>
</div>

Answer 2

Replace:

grid-template-columns: auto auto auto auto;

with:

grid-template-columns: 1fr 1fr 1fr 1fr;

or if you prefer:

grid-template-columns: repeat(4, 1fr);

auto means every column has the freedom to do what it wants, and they can be different if their content is different.

Setting all columns to 1fr means that they will all be always equal and 1/4 of the total available space.

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    padding: 30px;
}

.page-container {
    width: 90%;
    margin: auto auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 40px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.match {
    background-color: blue;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 280px;
    background-color: white;
    border-radius: 32px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.country {
    top: 25px;
    right: 25px;
    position: absolute;

}

.country img {
    border-radius: 20px;
    height: 40px;
    width: 40px;
}


.title {
    font-size: 35px;
    margin-bottom: 10px;
    font-family: 'Roboto', sans-serif;
    color: red;
}

.image-container {
    position: relative;
    width: 100%;
    display: block;
}

.coverimage {
    border-radius: 30px;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    filter: brightness(80%);
}

.user-info {
    position: absolute;
    bottom: 0;
    left: 0;
    vertical-align: bottom;
    padding-left: 15px;
    padding-bottom: 10px;
}

.user-info .user-name {
    font-size: 20px;
    font-weight: bold;
    color: white;
    padding-bottom: 5px;
    font-weight: bold;
}

.user-info .user-details {
    font-size: 18px;
    color: white;
}


.link {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    margin: auto auto;
}

.link a {
    color: red;
    text-decoration: none;
    padding: 5px;
}

.link a:link {
    color: red;
}

/* visited link */
.link a:visited {
    color: red;
}

/* mouse over link */
.link a:hover {
    color: #B81A04;
}

/* selected link */
.link a:active {
    color: #B81A04
}



.previous {
    text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
    text-align: center;
    background-color: #f1f1f1;
    color: black;
}

.next {
    text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--corendon-red);
    color: white;
}

.space {
  margin-left: 2.5em;
  padding: 0 7em 5em 0;
  border-width: 2px;
}

<!-- CONTENT -->
<div class="Container">
        <h1>My Matches</h1>

        <div class="page-container" id="myMatches">
    
      <div class="match">
        <div class="image-container">
          <img src="https://cdn.prijsvrij.nl/images/Landingpages/GeotextImages/nl/Plein%20Polen.jpg" class="coverimage">
          <div class="country">
            <img src="https://upload.wikimedia.org/wikipedia/commons/1/12/Flag_of_Poland.svg">
          </div>
          <div class="user-info">
            <div class="user-name">
              Alexander Vreeswijk
            </div>
            <div class="user-details">
              20 Jaar, Man<br>€1000 - €2000
            </div>
          </div>
        </div>
        <div class="link">
          <a href="mijn_matches_profiel.html?52">Bekijk</a>
          <img src="img/page/aanbevolen_matches/pijl.png">
        </div>
      </div>
      
      <div class="match">
        <div class="image-container">
          <img src="https://cdn.prijsvrij.nl/images/Landingpages/GeotextImages/nl/Plein%20Polen.jpg" class="coverimage">
          <div class="country">
            <img src="https://upload.wikimedia.org/wikipedia/commons/1/12/Flag_of_Poland.svg">
          </div>
          <div class="user-info">
            <div class="user-name">
              Alexander Vreeswijk
            </div>
            <div class="user-details">
              20 Jaar, Man<br>€1000 - €2000
            </div>
          </div>
        </div>
        <div class="link">
          <a href="mijn_matches_profiel.html?52">Bekijk</a>
          <img src="img/page/aanbevolen_matches/pijl.png">
        </div>
      </div>
      

      
  
    
    </div>

    <div class="space"></div>

        <a href="#" class="previous" onclick="backPage()"> Previous</a>
        <a href="#" class="next" onclick="nextPage()">Next</a>
    
    <div class="space"></div>
</div>