Define the height of Grid not by all columns

Question

I created a grid consisting of 3 columns and 4 rows. The last column is completely covered by an image (».box-image«, not as a background image), whereby this image and the column in which it is located should not extend the height of the other columns.

.grid{
    display: grid;
    grid-template-columns: 25% 25% 1fr;
    grid-template-rows: auto 1fr 1fr 50px;
}

.grid .box-image{
    grid-column: 3;
    grid-row: 1 / 5;
}

.grid .box-image img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

How do I determine that .box-image does not increase the height of the grid (1fr 1fr), and only assumes the height determined by the other content?

Does this answer your question? Controlling the size of an image within a CSS Grid layout — Brett DeWoody
Unfortunately, no. There is an attempt to make the grid assume the height of the image (100%). I would like the column with the image (.box-image) to assume the height of the remaining columns. — Martin
Please include your HTML preferably as a minimal reproducible example — Jon P

Brett DeWoody Brett DeWoody · Accepted Answer · 2020-01-16T09:48:01

You should only need to add a max-height to the image. See the 2 examples below which have different row heights. In both cases the image fills the height based on the height of the other rows.

.grid{
    display: grid;
    grid-template-columns: repeat(2, 25%) 4fr;
    grid-template-rows: auto 1fr 1fr 50px;
}

.grid > div {
  background-color: lightgray;
  border: 1px solid gray;
}

.grid .box-image {
    grid-column: 3;
    grid-row: 1 / 5;
}

.grid .box-image img {
    object-fit: cover;
    width: 100%;
    max-height: 100%;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div class="box-image">
    <img src="https://via.placeholder.com/200">
  </div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

With a 1000x1000px image:

.grid{
    display: grid;
    grid-template-columns: repeat(2, 25%) 4fr;
    grid-template-rows: auto 1fr 1fr 50px;
}

.grid > div {
  background-color: lightgray;
  border: 1px solid gray;
}

.grid .box-image {
    grid-column: 3;
    grid-row: 1 / 5;
}

.grid .box-image img {
    object-fit: cover;
    width: 100%;
    max-height: 100%;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div class="box-image">
    <img src="https://via.placeholder.com/1000">
  </div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

With no image:

.grid{
    display: grid;
    grid-template-columns: repeat(2, 25%) 4fr;
    grid-template-rows: auto 1fr 1fr 50px;
}

.grid > div {
  background-color: lightgray;
  border: 1px solid gray;
}

.grid .box-image {
    grid-column: 3;
    grid-row: 1 / 5;
}

.grid .box-image img {
    object-fit: cover;
    width: 100%;
    max-height: 100%;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div class="box-image"></div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Define the height of Grid not by all columns

1 Answers