How do I make my grid items fit/auto-resize inside my grid with a specified height?

Question

Hi I have a grid container and want the grid container to only be so high and all the grid items to fit and adjust accordingly to the grid height (500px). My code looks like this:

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;
    margin-top: 20px;
    height: 500px;
}


.grid-item{
    background-color: rgba(255, 255, 255, 0.8);
    overflow: auto;
    text-align: center;

}

<div class="grid-container">
  <div class="grid-item">
    <input type="text">
    <div id="counter">0<div>
    <img id="1" src="url">
  </div>
</div>

I have the user selecting and adding multiple grid items. However, I can't get the whole grid item (with the input, text, and image) to fit inside the grid. I've tried setting the grid-item to "width:100%" and "height:auto" with no luck...I couldn't figure out if it was the image...The best I could get so far was to set the image css to

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

however this only makes the image fit in the single grid item but doesn't fit the input and text div. I want all the grid item elements to fit.

Could someone please help?

Thanks ahead.

vishnu sandhireddy vishnu sandhireddy · Accepted Answer · 2020-06-06T17:41:21

You could use flex and flex-direction column for the grid-item. The flex-grow would help to specify how much the content can stretch. In the below example I have added flex-grow to 1 to stretch equally.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
  margin-top: 20px;
  height: 500px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  overflow: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.image {
  background-image: url(url);
  flex-grow: 1;
  background-size: cover;
}

<div class="grid-container">
  <div class="grid-item">
    <input type="text">
    <div id="counter">0</div>
    <div id="1" class="image">
    </div>
  </div>

How do I make my grid items fit/auto-resize inside my grid with a specified height?

2 Answers