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](https://stackoverflow.com/questions/46090760/controlling-the-size-of-an-image-within-a-css-grid-layout) — Brett DeWoody, Jan 16 '20 at 09:41
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, Jan 16 '20 at 09:44

Brett DeWoody · Answer 1 · 2020-01-16T10:41:26.840

0

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>

edited Jan 16 '20 at 10:41

answered Jan 16 '20 at 09:48

Brett DeWoody

59,771
29
135
184

Unfortunately, that's not the point. The height of the image should be insignificant for the overall height of the grid. Let's say in Div 4 and Div 5 are text content, which increases the height of the grid, then the height of the image should also expand. Not the other way around. – Martin Jan 16 '20 at 09:57
If you look at the 2nd demo you'll see the height of the image adjusts to the grid size. The image is actually 1000x1000px, but it is collapsed to the height of the grid rows. – Brett DeWoody Jan 16 '20 at 10:26
But if you delete the picture out of the grid, the height of the boxes (4 - 7) will also be lower. – Martin Jan 16 '20 at 10:36
Nope, it's the same size. I added another snippet showing the same markup without the image, and you can see the grid is still the same size. – Brett DeWoody Jan 16 '20 at 10:48
The height of the grid is defined by the `grid-template-rows: auto 1fr 1fr 50px;`, the image adjusts to fill the height of the 4 rows since the image spans all 4 rows. – Brett DeWoody Jan 16 '20 at 11:06
Brett, thanks for your help, but the grid has definitely another height with image inside. Please open both code snippet at a new window, you see the grid with the 1000x1000 fills almost a browser window, without not. – Martin Jan 16 '20 at 11:56
Currently the height of the image is determined by the width. And the height of the picture in turn enlarges the grid. – Martin Jan 16 '20 at 12:00
Are you talking about in my demo, or in your demo? – Brett DeWoody Jan 16 '20 at 12:33
What browser are you viewing these in? We might be dealing with a browser issue here. In Chome, the grids have the same height in the 2 demos above - 'With a 1000x1000px image', and 'With no image'. – Brett DeWoody Jan 16 '20 at 12:37
Ah, I see. Safari has an issue. – Brett DeWoody Jan 16 '20 at 12:37
https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug – Brett DeWoody Jan 16 '20 at 12:39
The linked post just discuss the differences between the browsers and helps to get 100% height of the image. But actually there is no conclusion for the problem here. – Martin Jan 17 '20 at 08:25
So I would very much like to provide a solution to the problem, but unfortunately I have not yet found any. – Martin Jan 17 '20 at 08:27
It does, under the Solution section. It involves making the item a flex item. – Brett DeWoody Jan 17 '20 at 08:27
For me it just generates a solution to view the image with a height of 100%. – Martin Jan 17 '20 at 08:56

Define the height of Grid not by all columns

1 Answers1